JavaScript中Cookie的简单封装

Cookie简介

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。

cookie需要自己进行封装，因为原生的cookie接口不够友好，所以我便封装了简易版的cookie练练手。

//构造一个Cookie类:工具类
function Cookie() {

}
// prototype:是构造函数的原型
// 该原型对象上所有的属性和方法都可以被该构造函数下的对象所拥有
//setCookie方法
Cookie.prototype.setCookie = function (args) {
    if (Array.isArray(args)) {//若传进来的数据是数组就遍历设置cookie
        for (let item of args) {
            let d = new Date();
            d.setTime(d.getTime() + item.time * 24 * 3600 * 1000);//设置时间
            document.cookie = item.key + "=" + item.value + ";expires=" + d;//添加cookie
        }
    }
    else {
        let d = new Date();
        d.setTime(d.getTime() + args.time * 24 * 3600 * 1000);
        document.cookie = args.key + "=" + args.value + d + ";expires=" + d;
    }
    // 将该方法的调用者返回，方便就按链式调用
    return this
}
//getCookie方法
Cookie.prototype.getCookie = function () {
    //定义一个空数组用于装处理之后的cookie数据，并返回
    let arr = [];
    //将全部的cookie数据取出来
    let cookie_str = document.cookie;
    //将取出来的cookie数据（字符串）进行处理
    let cookie_arr = cookie_str.split("; ");
    //进行遍历，将数组切成一个个对象并放入arr中
    for (let item of cookie_arr) {
        console.log(item.split("="))
        let obj = { key: item.split("=")[0], value: item.split("=")[1] };
        arr.push(obj);
    }
    return arr;
}
//hasCookie()方法：判断是否包含某个cookie(根据键(key)值确定)
Cookie.prototype.hasCookie= function (key) {
    //定义一个标志记录是否包含
    let flag = false;
    //这里的this就是使用本方法的对象
    let arr = this.getCookie()
    //使用some方法进行判断
    flag = arr.some(function (item) {
        return item.key === key;
    });
    return flag;
}
//removeCookie()方法：清除指定cookie
Cookie.prototype.removeCookie = function (key) {
    document.cookie = key + "=1;expires=-1";
}

最后附上cookie/WebStroge（sessionStorage/localStorage）三者的区别：

1）存储大小

cookie：一般不超过4K（因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识）
sessionStorage：5M或者更大
localStorage：5M或者更大

2）数据有效期

cookie：一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期才失效
sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除
localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除，因此用作持久数据

3）作用域

cookie：在所有同源窗口中都是共享的
sessionStorage：在同一个浏览器窗口是共享的（不同浏览器、同一个页面也是不共享的）
localStorage：在所有同源窗口中都是共享的

4）通信

ccokie：十种携带在同源的http请求中，即使不需要，故cookie在浏览器和服务器之间来回传递；如果使用cookie保存过多数据会造成性能问题
sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存
localStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存

5）易用性

cookie：需要自己进行封装，原生的cookie接口不够友好
sessionStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持
localStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持