实现管理本地缓存过期的方法

实现本地缓存处理有多种方法，cookie、localStorage、sessionStorage、IndexedDB 甚至是 window.name

这里比较常用的是 localStorage，但它没有过期时间

一种实现思路是：

将数据有效截止时间与数据一同存入 localStorage，当获取数据时，判断当前时间是否超过数据有效截止时间，以此实现过期时间管理

// 实现思路示例
// 存数据
function saveData(key, value, maxAge = 0) {
  try {
    localStorage.setItem(
      key,
      JSON.stringify({
        data: value,
        time: Date.now() + maxAge * 1000
      })
    )
  } catch (e) {
    console.error(e)
  }
}

// 取数据
function getData(key) {
  try {
    const cacheData = JSON.parse(localStorage.getItem(key))

    if (cacheData.time < Date.now()) {
      // 删除数据
      localStorage.removeItem(key)
      return
    }
    return cacheData.data
  } catch (e) {
    console.error(e)
  }
}

getData('name', 'cloudyan', 10)
getData('name') // cloudyan

// 10s 后
getData('name') // undefined

用于生产

上面实现了思路，但要用于生产环境，还需要设计封装一下

你可以选择使用 @deepjs/storage

适用于 web，封装 localStorage、sessionStorage，简单好用。
独立包，无依赖，语义化，使用简单

你也可以选择更为强大的 localforage

localForage 是一个快速而简单的 JavaScript 存储库。localForage 通过使用异步存储（IndexedDB 或 WebSQL）和简单的类似 localStorageAPI 来改善 Web 应用程序的离线体验。

localForage 在不支持 IndexedDB 或 WebSQL 的浏览器中使用 localStorage。

实现管理本地缓存过期的方法 ​

用于生产 ​

实现管理本地缓存过期的方法

用于生产