让缓存过期：惰性删除和定时删除提升 localStorage 效率

2023-09-15 17:22:39

让缓存到期：运用惰性删除和定时删除让 localStorage 更有效率

简介

localStorage 是一种在浏览器中存储数据的有用方法，可让您轻松存储键值对。它经常被与 sessionStorage 一起提及，两者都可以在浏览器中存储数据，但 sessionStorage 在会话结束后会被清除，而 localStorage 则不会。

然而，localStorage 的一个缺点是它不会自动清除过期的数据。这可能会导致您的应用程序中出现过时或不准确的数据。为了解决这个问题，您可以使用惰性删除和定时删除等技术来让缓存过期。

惰性删除

惰性删除是一种当数据被请求时才删除数据的方法。这意味着当应用程序尝试读取过期的值时，该值将被删除并从缓存中清除。

在 JavaScript 中，可以使用以下代码实现惰性删除：

const localStorageKey = "myData";
const expirationDate = new Date(Date.now() + 1000 * 60 * 60); // 一小时后过期

let data = localStorage.getItem(localStorageKey);

if (data) {
  const expirationTimestamp = JSON.parse(data).expirationTimestamp;
  if (expirationTimestamp < Date.now()) {
    localStorage.removeItem(localStorageKey);
    data = null;
  }
}

在这段代码中，我们检查 localStorage 中存储的值的过期时间戳。如果过期时间戳早于当前时间，则我们将删除该值。

定时删除

定时删除是一种在特定时间间隔后自动删除数据的技术。这意味着无论数据是否被请求，它都会在设定的时间后被清除。

在 JavaScript 中，可以使用以下代码实现定时删除：

const localStorageKey = "myData";
const expirationDate = new Date(Date.now() + 1000 * 60 * 60); // 一小时后过期

localStorage.setItem(localStorageKey, JSON.stringify({
  data: "my data",
  expirationTimestamp: expirationDate.getTime()
}));

setTimeout(() => {
  localStorage.removeItem(localStorageKey);
}, expirationDate - Date.now());