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

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

在 JavaScript 中操作 cookie 通過 document.cookie 來實現：

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

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

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

    function setCookie() {}

    function getCookie() {}

    var cookieUtil = function() {};

    window.cookieUtil = cookieUtil;
})();

我們封裝了一個自執行函數，在內部將 cookie 基本參數的鍵名存入 kvTool 對象當中設計的 options 參數的鍵名一一對應，并多帶帶聲明一個設置 cookie 的方法 setCookie 和獲取 cookie 的方法 getCookie，最后用函數表達式的形式聲明一個 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 方法的有三個參數：

k：cookie 發送信息的鍵

v：cookie 發送信息的值

options：cookie 的基本參數

當沒有傳入基本參數 options 的時候直接將 cookie 發送信息的鍵值拼接賦值給 document.cookie。

傳入基本參數 options 的時候取出 kvTool 真正的鍵名，并和 cookie 發送的信息的鍵值拼接成 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 方法只有一個參數，即我們要獲取的 cookie 的某一個屬性的鍵，函數會將對應的值返回。

其實對外暴露的方法只有 cookieUtil，所以 setCookie 和 getCookie 都是在 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(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) {
            // 沒有傳參, 得到數據
            return getCookie(key);
        } else {
            setCookie(key, value, options);
        }
    };

    window.cookieUtil = cookieUtil;
})();

cookieUtil 的邏輯為當 key 和 value 兩個參數都傳入時，調用 setCookie 來設置 cookie，只傳入 key 時，調用 getCookie 獲取 cookie 對應參數的值。

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