封装一个 cookie 功能

原文出自：https://www.pandashen.com

cookie 概述

由于浏览器无状态的特性，cookie 技术应运而生，cookie 是一个会话级的存储，用于某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密），通过访问某些服务器而特定携带的存储信息，不支持跨域，在浏览器清空缓存或超过有效期后失效。

JavaScript 中的 cookie

在 JavaScript 中操作 cookie 通过 document.cookie 来实现：

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

在传递 cookie 过程中，使用上面这样的方式对于参数的传递和拼接都是不太方便的，下面我们来封装一个自己的 cookie 功能。

封装一个 cookie 模块

1、整体思路设计

(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 暴露给全局作用域。

2、setCookie 方法的实现

(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。

3、getCookie 方法的实现

(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 内部调用的。

4、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。