概述

对于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(有效期)

有效期为session

其实我们也可以手动设置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天

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;