源码学习目录

1. 前言

1.1 环境

  1. 操作系统: macOS 11.5.2
  2. 浏览器: Chrome 94.0.4606.81
  3. js-cookie 6.0.0

    1.2 阅读该文章可以get以下知识点

  • js-cookie源码

    2. 开始

    2.1 如何使用

    ```javascript import Cookies from ‘js-cookie’

Cookies.set(‘foo’, ‘bar’)

  1. <a name="JMB54"></a>
  2. ## 2.2 源码
  3. ```javascript
  4. // 初始化函数
  5. function init (converter, defaultAttributes) {
  6.   // 设置cookie
  7.   function set (name, value, attributes) {
  8.     if (typeof document === 'undefined') {
  9.       return
  10.     }
  11.     // 合并属性
  12.     attributes = assign({}, defaultAttributes, attributes)
  13.     // 设置过期时间
  14.     if (typeof attributes.expires === 'number') {
  15.       // 用了科学计数864e5=86400000,e5就是后面5个0,Date.now()是毫秒级别,864e5这里代表一天,
  16.       attributes.expires = new Date(Date.now() + attributes.expires * 864e5)
  17.     }
  19.     if (attributes.expires) {
  20.       attributes.expires = attributes.expires.toUTCString()
  21.     }
  22.         // 做了uri的编码
  23.     name = encodeURIComponent(name)
  24.       .replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)
  25.       .replace(/[()]/g, escape)
  27.     var stringifiedAttributes = ''
  28.     for (var attributeName in attributes) {
  29.       if (!attributes[attributeName]) {
  30.         continue
  31.       }
  32.             // 将参数通过; 累加
  33.       stringifiedAttributes += '; ' + attributeName
  35.       if (attributes[attributeName] === true) {
  36.         continue
  37.       }
  39.       // Considers RFC 6265 section 5.2:
  40.       // ...
  41.       // 3.  If the remaining unparsed-attributes contains a %x3B (";")
  42.       //     character:
  43.       // Consume the characters of the unparsed-attributes up to,
  44.       // not including, the first %x3B (";") character.
  45.       // ...
  46.       stringifiedAttributes += '=' + attributes[attributeName].split(';')[0]
  47.     }
  49.     return (document.cookie =
  50.       name + '=' + converter.write(value, name) + stringifiedAttributes)
  51.   }
  52.      // 获取名称
  53.   function get (name) {
  54.     if (typeof document === 'undefined' || (arguments.length && !name)) {
  55.       return
  56.     }
  58.     // To prevent the for loop in the first place assign an empty array
  59.     // in case there are no cookies at all.
  60.     // 将cookie分割成数组
  61.     var cookies = document.cookie ? document.cookie.split('; ') : []
  62.     var jar = {}
  63.     for (var i = 0; i < cookies.length; i++) {
  64.       var parts = cookies[i].split('=')
  65.       var value = parts.slice(1).join('=')
  67.       try {
  68.         var found = decodeURIComponent(parts[0])
  69.         jar[found] = converter.read(value, found)
  71.         if (name === found) {
  72.           break
  73.         }
  74.       } catch (e) {}
  75.     }
  76.     // 获取需要的数组
  77.     return name ? jar[name] : jar
  78.   }
  79.     // 初始化返回一个对象,set,get,remove,只读attributes和converter
  80.   return Object.create(
  81.     {
  82.       set: set,
  83.       get: get,
  84.       // remove 清空数据,如果有属性,以属性作为初始化值
  85.       remove: function (name, attributes) {
  86.         set(
  87.           name,
  88.           '',
  89.           assign({}, attributes, {
  90.             expires: -1
  91.           })
  92.         )
  93.       },
  94.       // 修改attributes,返回一个新的对象
  95.       withAttributes: function (attributes) {
  96.         return init(this.converter, assign({}, this.attributes, attributes))
  97.       },
  98.       // 修改converter,返回一个新的对象
  99.       withConverter: function (converter) {
  100.         return init(assign({}, this.converter, converter), this.attributes)
  101.       }
  102.     },
  103.     {
  104.       attributes: { value: Object.freeze(defaultAttributes) },
  105.       converter: { value: Object.freeze(converter) }
  106.     }
  107.   )
  108. }
  110. export default init(defaultConverter, { path: '/' })
  111. /* eslint-enable no-var */

3. 总结

  1. js-cookie没什么特殊的,主要就是拼接字符串,分割字符串,设置一下过期时间

  2. 学会了科学计数法e{n},例如 1e4 = 10000 ,e后面的n表示有多少个n

    4. 参考文档

  3. https://github.com/js-cookie/js-cookie