本文参加了由公众号@若川视野发起的每周源码共读活动， 点击了解详情一起参与。

本文已参与「新人创作礼」活动，一起开启掘金创作之路

前言

之前的我不知道怎么回答，但是当我读了js-cookie这篇源码的时候我就知道了为什么会有cookie，为什么又会出现js-cookie等一些问题都清楚了。当然在读的时候你都不知道cookie是什么，肯定要先去查找资料百度 cookie是啥，我觉得就是这样才能一步步让自己变的更强大。要不是这篇源码，可能我不知道什么时候会去百度一下cookie是什么吧。。。。。

一、什么是cookie？

我们可以把Cookie 理解为一个存储在浏览器里的一个小小的文本文件，它附着在 HTTP 请求上，在浏览器和服务器之间“飞来飞去”。它可以携带用户信息，当服务器检查 Cookie 的时候，便可以获取到客户端的状态。

当我们创建了cookie当我发送一个请求时它会附着在我们的请求上，后端会读取到我们设置的cookie

二、js-cookie

js-cookie是一个简单的，轻量级的处理cookies的js API。

三、源码知识点

Object.assign()
合并对象。接收两个参数第一个参数是目标对象，后面的参数都是源对象，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。此方法实行的是浅拷贝。
Object.create(）
创建一个对象，接收两个参数第一个参数是为提供新创建的对象的__proto__，第二个是指定要添加到创建对象上的可枚举属性
**Object.freeze()
**Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

四、源码

导入自定义的方法

const assign = require('./assign.js') //自定义合并对象的方法
const defaultConverter = require('./converter.js') //自定义默认转换的方法

创建init方法接收两个参数第一个为导入的defaultConverter转换方法第二个为默认参数{path:'/'},函数里面有一个set方法和get方法，该函数返回一个对象。

set方法

设置一个cookie 此方法接收三个参数，第一个参数为键名第二个参数为对应的值，第三个参数为此cookie的一些配置例如 path 、 max-age

get方法

接收一个参数为要获取cooke的键返回对应的值

set方法

合并cookie配置

对路径的配置即那个路径下可以获取到当前设置的cookie

对时间的设置即cookie的过期时间，默认不设置浏览器窗口关闭则cookie消失

attributes = assign({}, defaultAttributes, attributes)

判断的过期时间是否是number，是的话从当前时间开始计算cookie的过期时间

 if (typeof attributes.expires === 'number') {
      attributes.expires = new Date(Date.now() + attributes.expires * 864e5)
  }

判断expires是否有值

  if (attributes.expires) {
      attributes.expires = attributes.expires.toUTCString()//转成中国标准时间
  }

配置拼接成字符串

var stringifiedAttributes = ''    
for (var attributeName in attributes) {
      //判断当前的key是否有值 没值退出当前循环进入下一次循环
      if (!attributes[attributeName]) {
        continue
      }

      stringifiedAttributes += '; ' + attributeName // 1.'; path'2.'; path=/; expires'...
      //判断值是否为true 为true 退出当前循环进入下一次循环
      if (attributes[attributeName] === true) {
        continue
      }

      // Considers RFC 6265 section 5.2:
      // ...
      // 3.  If the remaining unparsed-attributes contains a %x3B (";")
      //     character:
      // Consume the characters of the unparsed-attributes up to,
      // not including, the first %x3B (";") character.
      // ...
      //拼接属性值
      stringifiedAttributes += '=' + attributes[attributeName].split(';')[0] // 1.'; path=/'2.'; path=/; expires=时间'...
    }
   //写入到客户端本地储存
    return (document.cookie =
      name + '=' + converter.write(value, name) + stringifiedAttributes)

get方法

下面是在掘金上找的一些资料

.Cookie、

Cookie的大小限制在4KB左右，对于复杂的存储需求来说是不够用的。当 Cookie 超过 4KB 时，它将面临被裁切的命运。这样看来，Cookie 只能用来存取少量的信息。此外很多浏览器对一个站点的cookie个数也是有限制的
这里需注意：各浏览器的cookie每一个name=value的value值大概在4k，所以4k并不是一个域名下所有的cookie共享的,而是一个name的大小。
Cookie 是紧跟域名的。同一个域名下的所有请求，都会携带 Cookie。大家试想，如果我们此刻仅仅是请求一张图片或者一个 CSS 文件，我们也要携带一个 Cookie 跑来跑去（关键是 Cookie 里存储的信息并不需要），这是一件多么劳民伤财的事情。Cookie 虽然小，请求却可以有很多，随着请求的叠加，这样的不必要的 Cookie 带来的开销将是无法想象的。

cookie是用来维护用户信息的，而域名(domain)下所有请求都会携带cookie，但对于静态文件的请求，携带 cookie信息根本没有用，此时可以通过cdn（存储静态文件的）的域名和主站的域名分开来解决。

由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题，除非用HTTPS。

LocalStorage

保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。
大小为5M左右
仅在客户端使用，不和服务端进行通信
接口封装较好

sessionStorage

会话级别的浏览器存储

大小为5M左右
仅在客户端使用，不和服务端进行通信
接口封装较好

sessionStorage保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空；sessionStorage 特别的一点在于，即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 sessionStorage 内容便无法共享；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。除了保存期限的长短不同，SessionStorage的属性和方法与LocalStorage完全一样。

相关笔记链接juejin.cn/post/684490…

😄

Ah | 第十七期 | js-cookie