摘要：中的在中操作通過來實現(xiàn)操作在傳遞過程中，使用上面這樣的方式對于參數(shù)的傳遞和拼接都是不太方便的，下面我們來封裝一個自己的功能。上面就是我們封裝的功能模塊來幫主我們設(shè)置和獲取，之所以封裝這個功能最終的目的就是讓我們更方便的通過來操作。

由于瀏覽器無狀態(tài)的特性，cookie 技術(shù)應(yīng)運而生，cookie 是一個會話級的存儲，用于某些網(wǎng)站為了辨別用戶身份、進(jìn)行 session 跟蹤而儲存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密），通過訪問某些服務(wù)器而特定攜帶的存儲信息，不支持跨域，在瀏覽器清空緩存或超過有效期后失效。

在 JavaScript 中操作 cookie 通過 document.cookie 來實現(xiàn)：

// 操作 cookie
document.cookie = "key1=value1; key2=value2; path=/; domain=pandashen.com";

在傳遞 cookie 過程中，使用上面這樣的方式對于參數(shù)的傳遞和拼接都是不太方便的，下面我們來封裝一個自己的 cookie 功能。

(function() {
    var kvTool = {
        maxage: "max-age",
        path: "path",
        domain: "domain",
        secure: "secure"
    };

    function setCookie() {}

    function getCookie() {}

    var cookieUtil = function() {};

    window.cookieUtil = cookieUtil;
})();

我們封裝了一個自執(zhí)行函數(shù)，在內(nèi)部將 cookie 基本參數(shù)的鍵名存入 kvTool 對象當(dāng)中設(shè)計的 options 參數(shù)的鍵名一一對應(yīng)，并多帶帶聲明一個設(shè)置 cookie 的方法 setCookie 和獲取 cookie 的方法 getCookie，最后用函數(shù)表達(dá)式的形式聲明一個 cookieUtil 暴露給全局作用域。

(function() {
    var kvTool = {
        maxage: "max-age",
        path: "path",
        domain: "domain",
        secure: "secure"
    };

    function setCookie(k, v, options) {
        if (!options) {
            document.cookie = k + "=" + v;
        } else {
            var tmp = [];
            for (var key in options) {
                // { path="/", domain="pandashen.com" }
                tmp.push(kvTool[key] + "=" + options[key]);
            }
            document.cookie = k + "=" + v + "; " + tmp.join("; ");
        }
    }

    function getCookie() {}

    var cookieUtil = function() {};

    window.cookieUtil = cookieUtil;
})();

setCookie 方法的有三個參數(shù)：

k：cookie 發(fā)送信息的鍵

v：cookie 發(fā)送信息的值

options：cookie 的基本參數(shù)

當(dāng)沒有傳入基本參數(shù) options 的時候直接將 cookie 發(fā)送信息的鍵值拼接賦值給 document.cookie。

傳入基本參數(shù) options 的時候取出 kvTool 真正的鍵名，并和 cookie 發(fā)送的信息的鍵值拼接成 k=v; k=v 形式的字符串賦值給 document.cookie。

(function() {
    var kvTool = {
        maxage: "max-age",
        path: "path",
        domain: "domain",
        secure: "secure"
    };

    function setCookie(k, v, options) {
        if (!options) {
            document.cookie = k + "=" + v;
        } else {
            var tmp = [];
            for (var key in options) {
                // { path="/", domain="pandashen.com" }
                tmp.push(kvTool[key] + "=" + options[key]);
            }
            document.cookie = k + "=" + v + "; " + tmp.join("; ");
        }
    }

    function getCookie(k) {
        var strCookie = document.cookie;
        // 形如: "k=v; k=v; k=v; k=v"
        var kvs = strCookie.split(";").map(v => v.trim());
        var objCookie = {};

        kvs.forEach(v => {
            var kv = v.split("=");
            objCookie[kv[0]] = kv[1];
        });

        return objCookie[k];
    }

    var cookieUtil = function() {};

    window.cookieUtil = cookieUtil;
})();

getCookie 方法只有一個參數(shù)，即我們要獲取的 cookie 的某一個屬性的鍵，函數(shù)會將對應(yīng)的值返回。

其實對外暴露的方法只有 cookieUtil，所以 setCookie 和 getCookie 都是在 cookieUtil 內(nèi)部調(diào)用的。

(function() {
    var kvTool = {
        maxage: "max-age",
        path: "path",
        domain: "domain",
        secure: "secure"
    };

    function setCookie(k, v, options) {
        if (!options) {
            document.cookie = k + "=" + v;
        } else {
            var tmp = [];
            for (var key in options) {
                // { path="/", domain="pandashen.com" }
                tmp.push(kvTool[key] + "=" + options[key]);
            }
            document.cookie = k + "=" + v + "; " + tmp.join("; ");
        }
    }

    function getCookie(k) {
        var strCookie = document.cookie;
        // 形如: "k=v; k=v; k=v; k=v"
        var kvs = strCookie.split(";").map(v => v.trim());
        var objCookie = {};

        kvs.forEach(v => {
            var kv = v.split("=");
            objCookie[kv[0]] = kv[1];
        });

        return objCookie[k];
    }

    var cookieUtil = function(key, value, options) {
        if (!value) {
            // 沒有傳參, 得到數(shù)據(jù)
            return getCookie(key);
        } else {
            setCookie(key, value, options);
        }
    };

    window.cookieUtil = cookieUtil;
})();

cookieUtil 的邏輯為當(dāng) key 和 value 兩個參數(shù)都傳入時，調(diào)用 setCookie 來設(shè)置 cookie，只傳入 key 時，調(diào)用 getCookie 獲取 cookie 對應(yīng)參數(shù)的值。

上面就是我們封裝的 cookie 功能模塊來幫主我們設(shè)置和獲取 cookie，之所以封裝這個功能最終的目的就是讓我們更方便的通過 JavaScript 來操作 cookie。