@weier/u-cache

说明

• 这是一个用来处理前端状态持久化的库
• 初始化时自动读取已被持久化的数据，不需要手动处理 JSON.parse
• 缓存下的数据，页面刷新时不会丢失，并且数据类型不会丢失，如localStorage 缓存下来的数据读取出来必然是string，很多场景我们需要手动序列化与反序列化，比较繁琐，使用该库没有这个心智负担，存入数据是什么类型，读取出来就是什么类型
• api设计类原生 localStorage、sessionStorage
• 你也可以把该库当作一个简单的数据中心来使用，当然这并不是一个单向数据流库

// 安装
npm i @weier/u-cache -S

// 代码引入（可选）
import Cache from @weier/u-cache

基础用法

const defaultCache = {
  userName: null,
  userRole: null,
  userAge: null,
  likes: null,
}

const cache = new Cache(defaultCache, 'NAMESPACE', window.localStorage)

// 存储字段
cache.setItem('userName', '张三')
cache.setItem('userRole', 'ADMIN')
cache.setItem('userAge', 18)
cache.setItem('likes', ['乒乓球', '羽毛球'])

// 读取缓存
// 请注意观察 likes 返回的数据 仍旧是数组

cache.getItem('userName') // "张三"
cache.getItem('userRole') // "ADMIN"
cache.getItem('userAge') // 18
cache.getItem('likes') // ['乒乓球', '羽毛球']

// 删除字段缓存
cache.removeItem('userName')

cache.getItem('userName') // ''

Cache 实例化参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | --------- | ---------- | ------- | | defaultCache | 字段集合，这里只是一个预设值，值得注意的是：如果你期望某字段被缓存，你应该在实例化时声明该字段，并设置初始值，当该值被更新，初始值也会被覆盖掉 | Object | —— | —— |
| nameSpace | 命名空间，只要唯一即可 | String | —— | '' |
| storge | 缓存策略 | localStorage / sessionStorage | localStorage / sessionStorage | localStorage |

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | --------- | ---------- | ------- | | getItem | 获取字段值 | String | —— | —— |
| setItem | 设置字段值 | any | —— | —— |
| removeItem | 删除字段值（请注意字段值被删除后，该字段仍在缓存中存在的，并且值为''） | String | —— | —— |

其他

作者：基础建设组-金麦郎