关于cookie的操作（js操作和js-cookie插件的操作）

cookie 操作

---

cookie 是有大小限制的，每个 cookie 所存放的数据不能超过4kb，如果 cookie 字符串的长度超过4kb，则该属性将返回空字符串。

由于 cookie 最终都是以文件形式存放在客户端计算机中，所以查看和修改 cookie 都是很方便的，这就是为什么常说 cookie 不能存放重要信息的原因。

js操作cookie

存

// 简单存
document.cookie  = 'username=Darren';

取

// 取
getCookie(c_name) {
    if (document.cookie.length > 0) {
        //先查询cookie是否为空，为空就return ""
        let c_start = document.cookie.indexOf(c_name + "="); 
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1; 
            let c_end = document.cookie.indexOf(";", c_start); // indexOf()第二个参数表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
            if (c_end == -1) c_end = document.cookie.length;
            return unescape(document.cookie.substring(c_start, c_end)); //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
        }
    }
    return "";
},

有效期

// 有效期
document.cookie = "name=value;expires=date";

// 上面代码中的date值为GMT(格林威治时间)格式的日期型字符串，生成方式如下：
var _date = new Date();
_date.setDate(_date.getDate()+30);
_date.toGMTString(); // 用toGMTString()方法把Date对象转换为字符串，并返回结果

封装设置cookies函数

// 封装设置cookies函数
function setCookie(key, value, expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expiredays); // 以天为失效单位
    // exdate.setHours(exdate.getHours() + expireHours); // 以小时为失效单位
    document.cookie=key+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
//使用方法：setCookie('username','Darren',30) 

插件js-cookie操作

// 使用js-cookie
npm install js-cookie -S

// main.js
import Cookie from 'js-cookie';
Vue.prototype.Cookie  = Cookie 

// 关于js-cookie的操作详见这位大佬的博文
https://blog.csdn.net/qq_20802379/article/details/81436634