概述

對於Cookie，簡單描述就是，網站通過快取在使用者終端上的資訊（通常經過加密）來辨別使用者的身份，所使用的一種快取技術。

1. 新增Cookie

1.1 基本使用

格式： document.cookie = 'key=value;' ;

document.cookie = 'name=kevin;'; 
//可多次新增
document.cookie = 'age=23;'; 
console.log(document.cookie);//name=kevin; age=23; 

1.2 有效期

預設情況下，Cookie的儲存有效期為一次session，就是當你把瀏覽器關閉後，Cookie將會清除。

我們也可以在控制檯上看到剛才我們設定的Cookie，能清楚看到key vaule還有expiers(有效期)

其實我們也可以手動設定Cookie的有效期，只需在給document.cookie賦值時，字串後面加上expires=date;

這裡以天數為單位舉栗子：

var date = new Date();
//有效期為1天
date.setDate(date.getDate() + 1);
//由於下一步要拼接字串，因此expStr前面有個空格
var expStr = ' expires='+date+';';
document.cookie = 'name=kevin;' + expStr; 
//可多次新增
document.cookie = 'age=23;' + expStr; 

1.3 封裝一個新增Cookie函式

// 新增cookie
function addCookie(key, value, expires) {
    // 1.計算時間
    if(!expires){
        document.cookie = key+"="+value+"; ";
    }else{
        var date = new Date();
        date.setDate(date.getDate() + 7);
        document.cookie = key+"="+value+"; expires="+date+"; ";
    }
}

2. 獲取Cookie

我們把上面的新增的例子列印一下

console.log(document.cookie);//name=kevin; age=23;

獲得的是一個長字串，但這並不是我們想要的結果，現在的需求是，傳入一個key，返回它對應的value給我們使用

function getCookie(key) {
    //利用"; "打斷，將其分成陣列
    var array =  document.cookie.split("; ");
    for(var i = 0, len = array.length; i < len; i++){
        var subArr = array[i].split("=");
        if(subArr[0] == key){
            return subArr[1];
        }
    }
}

3.刪除Cookie

利用把時間設定為過去時間的原理，將其刪除

var date = new Date();
//有效期：當前時間-1天（過期）
date.setDate(date.getDate() - 1);
//由於下一步要拼接字串，因此expStr前面有個空格
var expStr = ' expires='+date+';';
document.cookie = 'name=kevin;' + expStr;