cookie、vue-cookie、js-cookie

一、cookie是存儲在客戶端瀏覽器的一段文本信息

　　1.大小限制在4KB

　　2.一個網站的cookie數量在50條左右

　　3.存入cookie有一定的風險

　　4.可以設置有效期，默認的為會話結束

　　5.一般路徑為根目錄

　　6.可以設置域名

　　7可以設置secure，通過https訪問（secure屬性：當設置為true時，表示創建的 Cookie 會被以安全的形式向服務器傳輸，也就是只能在 HTTPS 連接中被瀏覽器傳遞到服務器端進行會話驗證，如果是 HTTP 連接則不會傳遞該信息，所以不會被竊取到Cookie 的具體內容。）

cookie的完整格式

　　document.cookie = 'name=vlaue;expires=日期對象;path=/;domain=域名;secure;

cookie的原生封裝：

function createCookie(key,value,expires){
        var cookieText = encodeURIComponent(key) + '=' + encodeURIComponent(value) + ';path=/';
        if(!isNaN(expires)){
            var date = new Date();
            date.setDate(date.getDate() + expires);
            cookieText += ';expires=' + date;
        }
        document.cookie = cookieText;
    }
    function getCookie(key){
        var arr = document.cookie.split('; ');
        for(var i = 0,len = arr.length;i < len;i ++){
            var list = arr[i].split('=');
            if(encodeURIComponent(key) === list[0]){
                return decodeURIComponent(list[1]);
            }
        }
    }
    function removeCookie(key){
        document.cookie = encodeURIComponent(key) + '=;path=/;expires=' + new Date(0);
    }

 

二、vue-cookie

vue-cookie是在別人封裝好的cookie，通過npm下載引入進行使用，npm地址：https://www.npmjs.com/package/vue-cookies，

npm下載到項目

npm i vue-cookies -D

下載到vue項目后，創建新的cookie.js文件在文件中寫入

 import Vue from 'Vue'
 import VueCookies from 'vue-cookies'
 Vue.use(VueCookies)

然后在main.js中引用

import './cookie.js'

這樣就可以在各個組件中直接調用cookie

設置cookie

 this.$cookies.set(keyName, value,time,path,domain,secure)//KeyName是cookie的鍵，value是對應的值，time為何時自動刪除，path為存放路徑，domain為域名，secure為是否要以安全的方式傳輸

如果是一個簡單的項目，一般只會用到前四項

this.$cookies.set('test', '{a:1,b:2}',0,'/')   //意思為創建一個名為 test 的cookie ，值為{a:1,b:2},時間為0，即會話結束就刪除cookie，存放在根目錄 / 下

vue-cookie的時間有以下幾個格式

　　1.直接設置數字：0，1，-1。設置為0即會話結束就刪除cookie，設置1即一秒后刪除，設置-1即此cookie永不刪除，60 + 30即為1分30秒后，60*60即為1小時后，1就代表一秒

　　2.設置為字符串，比如："1s"即為一秒后刪除、"2min"就是兩分鍾、"3h"就是3個小時、"4d"就是4天、"5m"就是5個月、"6y"就是6年

　　3.也可以自定義設置時間 比如：new Date(2019,9,13).toUTCString()

 

this.$cookies.set('test', '{a:1,b:2}',-1)  //永不刪除
 
this.$cookies.set('test', '{a:1,b:2}',60)  //一分鍾后刪除
 
this.$cookies.set('test', '{a:1,b:2}','10s')  //10秒后刪除
 
this.$cookies.set('test', '{a:1,b:2}',new Date(2019,9,13).toUTCString())  //2019年10月13日刪除，new Date月份設置是從0開始的

 

 

 

cookie的獲取

this.$cookies.get(keyName)   //KeyName就是設置的cookie的名字，vue-cookie會將cookie自動轉為json對象格式

cookie的刪除

this.$cookies.remove(keyName)

支持判斷本地是否有此cookie

this.$cookies.isKey(keyName)  

獲取本地所有cookie的名稱

this.$cookies.keys() 

 

三、js-cookie

js-cookie同樣是npm中被人已經寫好的cookie工具，npm地址：https://www.npmjs.com/package/js-cookie；

npm下載命令

cnpm i js-cookie -D

也可以在vue中使用，下面是在react中的使用

通過命令在react項目中下載成功后在main.js文件中引用

import jsCookie from 'js-cookie';

React.Component.prototype.$cookie = jsCookie;  //添加到原型，使每一個組件都可以使用

js-cookie的使用就很簡單

設置cookie

this.$cookie.set('name', 'value');

設置刪除時間

this.$cookie.set('name', 'value',{expires: 7, path: '/'});  //此時為7天后刪除cookie，可以不設置，默認會話結束后自動刪除cookie

獲取cookie

this.$cookie.get('name');  //將會得到名為name的純字符串值

this.$cookie.getJSON('name');   //將會得到一個json格式的對象數據

this.$cookie.get(); 

this.$cookie.getJSON();     //如果沒有鍵名將會獲取所有的cookie

刪除cookie

this.$cookie.remove('name');