来认识一下 js-cookie

我正在参与AdminJS会员专属活动-源码共读第一期，点击参与

前言

因为疫情原因已经居家了，所以有更多时间来学习源码了。（订个小目标，这个星期疯狂阅读源码）

上一段源码学习是有关 axios 的工具函数，这次则是一个比较陌生的知识 —— js-cookie。我还特地去查阅了一下关于它的资料，了解到它是一个简单且轻量的处理 cookies 的 API。其实，要了解 js-cookie，我们可以先了解一下 cookie。

cookie

相信很多人看到 cookie 第一反应是曲奇甜饼，毕竟它的中文意思就是这个。cookie 是一段文本信息，客户端向服务端请求数据，服务端就会向客户端发送一个 cookie 值进行保。简单点理解就是 cookie 是用来记录某些当页面关闭或者刷新后仍然需要记录的信息。关于 cookie、localstorage、sessionStorage 它们三者的区别，我们今天不做讨论。今天我们的主题是 js-cookie。

js-cookie

它是一个处理 cookie 的 API，它上手起来很简单，但是我们并不讲如何使用它，而是来分析它的源码。

源码分析

和之前看源码一样，我们先找到 package.json 文件，在里面可以发现很多有用信息。

比如 description 里对它的描述。

在 src 文件下有如下文件。

在 api.mjs 中，有两个函数，分别是 init 函数和 get 函数，由于代码比较多，这里就不附上 init 函数相关代码了。如下是 get 函数代码部分，我们分析一下其中的逻辑。

 function get (name) {
    if (typeof document === 'undefined' || (arguments.length && !name)) {
      return
    }
    var cookies = document.cookie ? document.cookie.split('; ') : []
    var jar = {}
    for (var i = 0; i < cookies.length; i++) {
      var parts = cookies[i].split('=')
      var value = parts.slice(1).join('=')
      try {
        var found = decodeURIComponent(parts[0])
        jar[found] = converter.read(value, found)
        if (name === found) {
          break
        }
      } catch (e) {}
    }
    return name ? jar[name] : jar
  }

首先可以看到它将获取的 cookie 值通过 split() 方法切割成数组了。成为数组后便对对它进行一次遍历，在遍历的过程中先解析传入的 name 值，然后解析了 value 值，try catch 里面可能有些方法可能都不熟悉，不过没关系，我们抓住最关键的逻辑理解就行，那些方法就是来解析 name 和 value 的。

最后我们来看 return 返回结果的这一部分，它在返回结果这里做了一个三元判断，判断是否返回一个单独值还是一个包含 cookie 值的对象。

对于 get 方法中解析 value 值使用到的 converter 方法相关代码如下。

export default {
  read: function (value) {
    if (value[0] === '"') {
      value = value.slice(1, -1)
    }
    return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent)
  },
  write: function (value) {
    return encodeURIComponent(value).replace(
      /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
      decodeURIComponent
    )
  }
}

总结

以上就是对 js-cookie 源码中的 get 方法的阅读笔记了。js-cookie 源码相比较于我们之前阅读的而言还是比较多的，有一百多行，但是整体来说源码简单易懂，没有很难的地方，这一点是比较好的。