如何封装一个Cookie库

Posted 2020-12-31 yuliangbin

由Cookie详解我们已经了解到了Cookie是为了实现有状态的基于HTTP协议的应用而存在的。一个Cookie的由以下几个部分组成：

//设置cookie的格式和Set-Cookie头中使用的格式一样
document.cookie = "name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure"
//这些参数中，只有cookie的名字和值是必需 的。下面是一个简单的例子。
//需要开一个服务器才能设置成功，本地测试的情况下设置cookie无效
document.cookie = "name=Nicholas";

很显然，javascript中读写cookie不是非常直观， 常常需要写一些函数来简化cookie的功能。基本的cookie操作有三种：读取、写入和删除。

关于读取、写入、删除Cookie需要注意哪些情况，可以参考一下这篇文章：聊一聊 cookie。

对于需要同时设置多个参数的情况，我们通常以对象的方式传入这些参数。

如：

default = {
    ‘name‘: null,
    ‘value‘: null,
    ‘expires‘: new Date().getTime() + (1000*60*60*24),//默认Cookie的有效期为1天
    ‘path‘: ‘/‘,
    ‘domain‘: ‘‘,
    ‘secure‘: false
};
//每个参数的意义可以看之前写的文章

 一个完整的cookie操作方法库。

let cookieRender = (function () {
    //设置一个Cookie
    /**
     * 要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。
     * 但要注意一点，在设置新cookie时，path/domain这几个选项一定要旧cookie 保持一样。
     * 否则不会修改旧值，而是添加了一个新的 cookie。
     * params options 对象
     *         name    cookie的名字
     *         value    cookie的值
     *         expires    cookie的过期时间，传入毫秒数
     *         path    cookie生效的路径
     *         domain    cookie生效的域
     *         secure    cookie的安全标志
    */
    function setValue(options) {//当传入的参数过多时，可以用一个对象的方式传入
        let _default = {
            ‘name‘: null,
            ‘value‘: null,
            ‘expires‘: new Date().getTime() + (1000*60*60*24),
            ‘path‘: ‘/‘,
            ‘domain‘: ‘‘,
            ‘secure‘: false
        };
        for (let key in options) {
            if (options.hasOwnProperty(key)){
                _default[key] = options[key];
            }
        }
        document.cookie = _default.name + "=" + escape(_default.value) + "; expires=" + _default.expires + "; path=" + _default.path +  "; domain=" + _default.domain;
        if (_default[‘secure‘]) {
            document.cookie += ‘; secure;‘;
        }
    }
    
    //获取Cookie
    function getValue(name) {
        let arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr != null) {
            return unescape(arr[2]);
        }
        return null;
    }
    
    //删除
    /*
     * 删除一个cookie 也挺简单，也是重新赋值，
     * 只要将这个新cookie的expires 选项设置为一个过去的时间点就行了。
     * 但同样要注意，path/domain/这几个选项一定要旧cookie 保持一样。
    */
    function removeValue(options) {
        let _default = {
            name: null,
            path: ‘/‘,
            domain: ‘‘
        };
        for (key in options) {
            if (options.hasOwnProperty(key)) {
                _default[key] = options[key];
            }
            if (this.getValue(_default)) {
                document.cokie = _default.name + "= " + ";path=" + _default.path + ";domain=" + _default.domain + ";expires=" + new Date(0);
            }
        }
    }
    
    return {
        set: setValue,
        get: getValue,
        remove: removeValue
    }
})();