localStorage 时效存储

记得当年在优信贷面试时，跟面试官说了在 localstorage 做有时效的存储的想法。

这样的想法其实很多人都会有的，个人也相信很多企业在实际中肯定也有这样的实践。

浏览器常用存储

说这个问题前我们先说下现在前端的集中本地存储。

这个是传统服务器和浏览器都可操作的共享存储。
特点:

1. 存储空间想多有限，一般组多为 4m。
2. 因为每次传输会后携带，所以过大的会增加请求量，增加请求时间，降低性能。
3. 相对不太安全。
4. 存储为字符串键值对。
5. 可以添加时效。

sessionSstorage

这个是 H5 新加的功能，最大的特点是只存在于浏览器打开的当前 tab 页面。如果关闭 tab 或者不关闭再新打开一个 tab，都不会存在当前这个 tab 的 session 数据。

还有一个特点就是没有时效性。

localStorage

这个也是 H5 新加的特性其特点跟 session 一样，只是如果不去主动清除那么会一直存储在用户的电脑上。

除此之外还有其他特点。

1. 只存在于用户本地，相比cookie安全。
2. 存储大小一般来说没有限制。

什么是 localstorage 时效存储

简而言之就是给 Localstorage 或者 sessionStorage 的值添加一个时效，过了这个时效，在获取这个字段的值为空或者重新获取。

这样做的好处就是利用了本地 storage 的安全性，同时也把其时效变得可控，也减少了每次请求数据的负担。

场景

适用于那些耗时的请求，且该请求的数据对失效也有一定要求。
比如市场地理分布，各种需要缓存的列表等。

解决方案

具体的原理非常简单，就是使用对象存储这个数据，然后给该对象添加时效字段，之后在每次获取数据时，进行判断该字段是否过时。

过时后也可以做刷新操作。

cddStore 介绍

获取

npm i cdd-lib

引入

import { CddStore } from 'cdd-lib'

存储数据

import { CddStore } from "cdd-lib";

let store = new CddStore([
  { key: "name", value: "cdd" }, //默认是半天
  { key: "age", value: 23, hours: 4 }, //设置时效是4个小时
  { key: "name2", value: "今晚打老虎", days: 0.8, hours: 4 }, //设置时效是0.8天加上4个小时
  {
    key: "session",
    value: "sdfasf",
    hours: 0.5,
    refresh() {
      return "dfasdfas";
    },
  }, //设置失效是30分钟，过时后可以使用refresh自动获取
]);

使用数据

// 使用数据
assert(store.name.value==='cdd')
assert(store.age.value===23)

查看是否过期

assert(store.name.isOver)
assert(store.age.isOver)

更多用法查看源码：

npm页面
CddStore源码

farmerz