cookie_function

发表于 | 分类于 | 阅读次数
cookie常用方法封装

概述

用 JavaScript 操作Cookie，用原声的接口document.cookie属性是比较难用的，所以封装一个添加、修改、删除的操作方法还是很有必要的。
同时要注意的是： Cookie 的所有name和value都是要经过URI编码的，必须使用decodeURICompoent()来编码。

在浏览器端可以通过document.cookie来创建cookie，但是cookie只能是字符串形式并且格式必须是url格式，所以就要自行封装方法来使用。

代码封装如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/**
 * @params {String} key 键名
 * @params {String} value 键值
 * @params {String} options 配置项 如 readOnly expires path secure
 */
function setCookie(key, value, options) {
  // 判断是否有document
  if (typeof document === 'undefined') {
    return;
  }
  // 默认配置
  var defalutConfig = {};
  // 合并配置
  var options = extend(defalutConfig, {}, options);
  // 判断expires是否为数字
  if (typeof options.expires === 'number') {
    var days = options.expires,
      t = (options.expires = new Date());
    t.setMilliseconds(t.getMilliseconds() + days * 864e5);
  }
  // 判断value是否为object，是的话通过JSON.stringify序列化
  var value =
    Object.prototype.toString.call(value) !== '[object Object]'
      ? String(value)
      : JSON.stringify(value);
  document.cookie = [
    encodeURIComponent(key),
    '=',
    value,
    options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
    options.path ? '; path=' + options.path : '',
    options.domain ? '; domain=' + options.domain : '',
    options.secure ? '; secure' : ''
  ].join('');
}

/**
 * @descriptor 合并options
 *
 */
function extend() {
  var result = {},
    args = Array.prototype.slice.call(arguments),
    len = args.length;
  for (let i = 0; i < len; i++) {
    var options = args[i];
    for (let key in options) {
      result[key] = options[key];
    }
  }
  return result;
}

测试代码：

1
2
3
4
5
6
setCookie('token', 'asd1231asdas123sfdsdf3453asas121asd', {
  expires: 1,
  path: '/',
  domain: 'localhost'
});
// "token=asd1231asdas123sfdsdf3453asas121asd; expires=Fri, 20 Sep 2019 06:46:09 GMT; path=/; domain=localhost"

可以通过document.cookie获取cookie，但是要转换为对象，实现代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
function decode(s) {
  return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
}
/**
 * @params {Stirng} key 要获取的键值
 * @params {Boolean} json 是否返回json格式
 * @return {Object} 返回cookie
 */
function getCookie(key, json) {
  // 判断是否存在document
  if (typeof document === 'undefined') {
    return;
  }
  // 声明变量
  var result = {},
    cookies = document.cookie ? document.cookie.split('; ') : [],
    len = cookies.length;
  // 循环获取cookie，拼接or匹配 key
  for (var i = 0; i < len; i++) {
    // 以‘=’分割数组
    var parts = cookies[i].split('='),
      cookie = parts.slice(1).join('=');
    if (!json && cookie.charAt(0) === '') {
      cookie = cookie.slice(1, -1);
    }
    try {
      // 通过decodeURIComponent 解码
      var name = decode(parts[0]);
      cookie = decode(cookie);
      // 根据实参json返回不同的数据类型
      if (json) {
        try {
          cookie = JSON.parse(cookie);
        } catch (e) {}
      }
      result[name] = cookie;
      if (key === name) {
        break;
      }
    } catch (e) {}
  }
  // 返回数据
  return key ? result[key] : result;
}
// 测试代码
getCookie('user', true);
// {name: "admin", age: 18}

同样通过setCookie来实现删除cookie，只是传入特定参数expires: -1，实现代码如下：

1
2
3
4
5
6
7
function removeCookie(key, options) {
  setCookie(key, '', extend(options, { expires: -1 }));
  return !getCookie(key);
}
// 测试代码
removeCookie('token');
// true

到此cookie的操作到此结束。

总结

这篇文章比较简单，记录了对cookie的增删改查。