什么是JavaScript Cookie（js-cookie）
JavaScript Cookie是一個簡單、輕巧的JavaScript API，專門用于處理cookie
具有如下特性
如何安裝
$ npm install js-cookie --save
如何使用
- 已安裝后使用
// 在需要的文件中使用
<script src="/path/to/js.cookie.js"></script>
// 或者在main.js中引入后使用
// 引入
import Cookies from 'js-cookie'
// 使用
this.$cookie
- 未安裝使用
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
注意：不要直接從GitHub（http：//raw.github.com / ...）包含腳本。該文件被用作文本/純文本，因此例如在Windows 7的Internet Explorer中被阻止（由于錯誤的MIME類型）
基礎(chǔ)用法
- 創(chuàng)建一個cookie，使其在網(wǎng)站內(nèi)皆可使用
Cookies.set('name', 'value');
- 創(chuàng)建一個從現(xiàn)在起7天到期的cookie，使其在網(wǎng)站內(nèi)皆可使用
Cookies.set('name', 'value', { expires: 7 });
- 創(chuàng)建一個從現(xiàn)在起7天到期的cookie，使其在當(dāng)前頁面內(nèi)可用
Cookies.set('name', 'value', { expires: 7, path: '' });
- 讀取cookie
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
- 讀取所有可見cookie
Cookies.get(); // => { name: 'value' }
注意：不可通過特定的key值去獲取相對應(yīng)的cookie（無論是cookie在之前使用過或者未使用過）
Cookies.get('foo', { domain: 'sub.example.com' }); // 將不會有任何響應(yīng)
名為foo的cookie僅在通過.get()方法讀取后才可以使用。讀取時，domain和path屬性將不起作用。
- 刪除 cookie
Cookies.remove('name');
- 刪除當(dāng)前頁面的cookie
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // 失敗!
Cookies.remove('name', { path: '' }); // 成功!
注意?。。。簞h除Cookie時，如果您不依賴默認屬性，則必須傳遞與設(shè)置Cookie時使用的完全相同的路徑和域?qū)傩?/em>
Cookies.remove('name', { path: '', domain: '.yourdomain.com' });
注意：移除不存在的cookie不會拋出異常
關(guān)于命名沖突
如果存在可能存在命名沖突的cookie名，noConflict()方法將使我們可以使用我們需要的命名且保留原本沖突的名字。在一些第三方插件（例如，作為組件或SDK的一部分）上運行腳本時，這特別有用。
// Assign the js-cookie api to a different variable and restore the original "window.Cookies"
var Cookies2 = Cookies.noConflict();
Cookies2.set('name', 'value');
JSON
js-cookie 提供了簡易的JSON使用
當(dāng)我們需要創(chuàng)建cookie時，我們可以使用Array或者Object，而不是只能使用String。當(dāng)你使用Array或者Object后，可以通過JSON.stringify()來獲取到對應(yīng)的對象
Cookies.set('name', { foo: 'bar' });
當(dāng)我們使用Cookies.get()讀取cookie時，我們獲取到的是一個String
Cookies.get('name'); // => '{"foo":"bar"}'
Cookies.get(); // => { name: '{"foo":"bar"}' }
當(dāng)我們使用Cookie.getJSON()讀取cookie是，會自動對String進行JSON.parse()操作
Cookies.getJSON('name'); // => { foo: 'bar' }
Cookies.getJSON(); // => { name: { foo: 'bar' } }
編碼與解碼
編碼與解碼符合RFC 6265。cookie的名稱或cookie的值中不允許包含所有特殊字符。相應(yīng)的會使用percent-encoding
和UTF-8進行編碼
cookie名稱或cookie值中唯一被允許使用的特殊是字符是%字符。是為了能將percent-encoding的字符轉(zhuǎn)義為文字。
請注意，默認的編碼/解碼策略只能在js-cookie讀/寫cookie之間相互操作。要覆蓋默認的編碼/解碼策略，您需要使用Converter。
注意：根據(jù)RFC 6265，如果您的Cookie太大或同一域中的Cookie太多，則它們可能會被刪除，有關(guān)更多詳細信息，請點擊此處。
Cookie的屬性
可以通過設(shè)置Cookies.defaults對象的屬性來全局設(shè)置Cookie屬性默認值，也可以通過Cookies.set(...)在最后一個參數(shù)中傳遞普通對象來為每次調(diào)用分別設(shè)置Cookie屬性默認值。每次傳遞的屬性會覆蓋默認屬性。
expires
定義何時刪除cookie。值可以是 Number，它將被解釋為從創(chuàng)建日期Date實例開始算起的天數(shù)。如果省略，則該cookie成為會話cookie。
default
當(dāng)用戶關(guān)閉瀏覽器時，將刪除Cookie
path
一個指示cookie可見的String路徑。
Converters
讀取
創(chuàng)建一個新的api實例，該實例將覆蓋默認的decoding實例。
所有讀取方法依賴于正確的decoding的執(zhí)行（例如Cookies.get()和Cookies.get('name')）。調(diào)用這些方法的時候，都將首先運行cookie運行轉(zhuǎn)換器。
返回的字符串將用作cookie值。
例如下方對于escaped例子的使用
document.cookie = 'escaped=%u5317';
document.cookie = 'default=%E5%8C%97';
var cookies = Cookies.withConverter(function (value, name) {
if ( name === 'escaped' ) {
return unescape(value);
}
});
cookies.get('escaped'); // 北
cookies.get('default'); // 北
cookies.get(); // { escaped: '北', default: '北' }
寫入
創(chuàng)建一個覆蓋默認encoding的api實例：
Cookies.withConverter({
read: function (value, name) {
// Read converter
},
write: function (value, name) {
// Write converter
}
});
