【源码共读】第17期 | js-cookie

清浅吖
238 阅读3分钟

前言

问题清单

  1. 了解js-cookie的使用及封装
  2. cookie、localstorage、sessionStorage 的区别
  3. 了解项目的工程化配置

了解js-cookie的使用及封装

如何使用

克隆下来项目后，要想知道如何使用，一般看readme.md文件，里面会写明怎么使用。

$ npm i js-cookie 

Cookies.set('name', 'value', { expires: 7, path: '' }) // set
Cookies.get('name') // => get 'value'
Cookies.remove('name', { path: '' }) // remove

代码分析

找主线。先看package.json文件中，scripts中没有看到入口文件，从"dist": "rm -rf dist/* && rollup -c",看是打包功能，使用到了rollup，那么，猜测rollup中会有打包入口文件，文件目录中刚好有rollup.config.mjs可知，rollup配置，打开文件，看到input: 'src/api.mjs',,嗯，似乎找到了入口文件，打开api.mjs文件,看到具体的代码实现如下。


function init (converter, defaultAttributes) {
  function set (name, value, attributes) { } // set

  function get (name) {   return  } // get

  return Object.create(
    {
      set,
      get,
      remove: function (name, attributes) {
        set( name, '', assign({}, attributes, { expires: -1 }) )
      },
      withAttributes: function (attributes) { },
      withConverter: function (converter) { }
    },
    {
      attributes: { value: Object.freeze(defaultAttributes) },
      converter: { value: Object.freeze(converter) }
    }
  )
}

export default init(defaultConverter, { path: '/' })
  • init方法中有五个方法（set、get、remove、withAttributes、withConverter）和两个默认属性（attributes、converter）,其中前三个方法是项目中使用到cookie后最常用的；
  • set:

image.png

  • get:
    • 传出name调用get获取value
    • document.cookie获取所有cookie并对cookie进行; 和= 的处理，处理成{key:value}方式，并通过obj[key]的方式获取对应的值
    • parts.slice(1).join('=')，因为split('=')做了操作，可能会误操作带有=的数据，所以有了join的还原数据的操作，细节处理很巧妙
  • remove:
    • 追根到底，还是通过set方法把key的value设置为空字符串，过期时间设置为-1（立马过期）
  • withAttributes
    • 合并属性
  • withConverter
    • 辅助重写
  • attributes
    • 默认配置项，即 { path: '/' }
    • 为什么使用Object.freeze(defaultAttributes)方法？
    • 对象是引用类型的，添加新的attributes会对defaultAttributes对象进行修改，而Object.freeze方法就是冻结defaultAttributes对象，防止defaultAttributes对象修改
  • converter
    • 更新默认转换器
    • 默认提供了read和write方法decodeURIComponent和encodeURIComponent

cookie、localstorage、sessionStorage找不同

区别cookielocalstoragesessionStorage
生命周期可以设置失效时间，没有设置的话，默认是关闭浏览器后失效除非被手动清除，否则永久保存仅在当前网页会话有效，关闭页面或浏览器后就被清除
存放数据大小不超过4kb5MB左右5MB左右
使用范围同一域名，同一浏览器同一域名，同一浏览器同一域名，同一浏览器
适用场景当客户端和服务端需要状态同步的时候，如登录状态本地永久存储数据本地临时存储数据

工程化配置知多少

  • release-it
    • 如何用
      • npm install release-it
      • 创建.release-it.json文件配置对应规则
    • 作用
      • 自动升级版本号
      • 生成CHANGELOG
      • 构建项目
      • 发布npm包
      • 发布github release
  • 项目采用rollup打包构建，rollup.config.js配置打包细节
  • exports：{}

    • 支持commonjs和esmodule方式

    • 默认es module规范

总结

一句话简述js-cookie实现：提供了set,get,remove等常用方法，支持额外属性传入和转换覆盖重写。

通过js-cookie仓库，学会了Object.create，Object.freeze的使用场景,知道了cookie、localstorage、sessionStorage的区别,巩固了replace，split，encodeURIComponent等基础知识,也了解rollup的打包方式。

avatar
文章
阅读
粉丝