Vue.js學習（六）—— 輕量級JS Cookie插件

　　js-cookieGitHub地址
　　js-cookie具體使用

　　Cookie，有時也用其復數形式 Cookies，指某些網站為了辨別用戶身份、進行 session 跟蹤而儲存在用戶本地終端上的數據（通常經過加密）。

　　js-cookie插件是一個JS操作cookie的插件，源文件只有3.34 KB，非常輕量級，js-cookie也支持npm和Bower安裝和管理，下面看看js-cookie的具體用法

一、引入js-cookie.js

1、直接飲用cdn

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

2、本地下載下來后

<script src="/path/to/js.cookie.js"></script>

3、模塊化開發時

$ npm install js-cookie --save
import Cookies from 'js-cookie'

 

二、js-cookie.js常用的API和方法

1、設置cookie

Cookies.set('name', 'value');//創建一個cookie，在整個站點都有效
Cookies.set('name_json', {name:'injurys', age:20});//創建一個cookie，數據是json對象，在整個站點都有效
Cookies.set('name', 'value', { expires: 7 });//創建一個cookie，有效期7天從現在，在整個站點都有效
Cookies.set('name', 'value', { expires: 7, path: '' });//創建一個過期的cookie，對當前頁面的路徑有效
Cookies.set('name', 'value', { expires: 7, path: '/', domain: config.COOKIE_DOMAIN});

　　以上三種方式都可以進行設置，設置的值如果不是字符串，那么在儲存時將自動進行 JSON.stringify。

expires：設置當前cookie的過期時間，單位為 天。
path：設置當前cookie的有效路徑。
domain：設置當前cookie的有效域名。
secure：cookie 傳輸需要安全協議（HTTPS）。

2、讀取cookie

let res1 = Cookies.get('name');//獲取指定名稱的cookie 'value'
let res2 = Cookies.get('name_json');
    '{"name":"injurys","age":20}'
let res3 = Cookies.getJSON('name_json');
    {name: "injurys", age: 20}
Cookies.get(); //讀取所有的cookie

　　使用 get 方法獲取到的是一個字符串，如果你設置的是一個 json 對象，可以使用 getJSON 獲取，返回的就是轉換格式的對象。

3、刪除cookie

Cookies.remove('name'); //刪除cookie時必須是同一個路徑。

　　刪除未存在的cookie不會引發任何異常，也不會返回任何值。

　　注意：刪除cookie時必須傳遞與設置時一樣的 路徑（path） 和 域（domain） 屬性。