一文教你如何实现localStorage的过期机制

首先需要明确 localStorage 是HTML5标准中的一种客户端存储方式，可以在浏览器中存储数据并保留在客户端本地。而过期机制则是指设置一个过期时长，在达到时限之后，数据自动失效并被清空。

下面就来介绍如何实现 localStorage 的过期机制:

步骤1：封装localStorage

首先我们需要进行封装 localStorage，以方便我们在任何时候获取存储的数据。具体实现可以参考以下代码：

const ls = window.localStorage

export const setLocalStorage = (key, value) => {
  if (typeof value !== "string") {
    value = JSON.stringify(value)
  }
  ls.setItem(key, value)
}

export const getLocalStorage = (key) => {
  let value = ls.getItem(key)
  if (/^\{.*\}$/.test(value) || /^\[.*\]$/.test(value)) {
    value = JSON.parse(value)
  }
  return value
}

export const removeLocalStorage = (key) => {
  ls.removeItem(key)
}

export const clearLocalStorage = () => {
  ls.clear()
}

在这段代码中，我们使用 Export 导出了 setLocalStorage、getLocalStorage、removeLocalStorage、clearLocalStorage 方法，它们对应着 localStorage 中的 setItem、getItem、removeItem、clear 方法。

这样我们就可以方便地封装 localStorage 了，接下来我们就要实现过期机制。

步骤2：设置过期时间

要给 localStorage 设置过期时间，我们可以把过期时间作为 value 的一个属性存进去，然后在获取 value 值的时候判断是否过期。

具体实现可以参考以下代码：

const setLocalStorageWithExpire = (key, value, expireTime) => {
  const obj = {
    value: value,
    expireTime: expireTime,
  }
  ls.setItem(key, JSON.stringify(obj))
}

const getLocalStorageWithExpire = (key) => {
  const data = ls.getItem(key)
  if (!data) {
    return null
  }
  const obj = JSON.parse(data)
  if (obj.expireTime && Date.now() - obj.expireTime > 0) {
    removeLocalStorage(key)
    return null
  }
  return obj.value
}

在这段代码中，我们新增了 setLocalStorageWithExpire 和 getLocalStorageWithExpire 方法，其中 setLocalStorageWithExpire 方法在 localStorage 中存储了一个 obj 对象，其中包含 value 和 expireTime 两个属性。getLocalStorageWithExpire 方法则在获取 value 值时，首先判断是否过期并进行清除，然后返回数据。

步骤3：应用过期机制

下面以数据获取为例应用过期机制，示例代码如下：

import { getLocalStorageWithExpire, setLocalStorageWithExpire } from "./localStorage"

const fetchData = async () => {
  const cacheData = getLocalStorageWithExpire("key1")
  if (cacheData) {
    return cacheData
  } else {
    const res = await fetch("https://example.com/api/data")
    const data = await res.json()
    setLocalStorageWithExpire("key1", data, Date.now() + 60 * 1000) // 设置60秒有效期
    return data
  }
}

在这段代码中，我们首先使用 getLocalStorageWithExpire 方法获取数据，如果数据没有过期则返回缓存数据，否则重新请求并设置有效期。这样就完成了过期机制的应用。

总结

以上就是使用 localStorage 实现过期机制的完整攻略了，我们通过封装 localStorage 并设置过期时间，最后应用过期机制来让数据自动失效并清空。可以让我们在开发中更好地利用客户端本地存储。