由于浏览器无状态的特性，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 暴露给全局作用域。

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。

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

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。