如何封裝一個Cookie庫 Cookie詳解

由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
    }
})();