揭秘 localStorage：简单使用指南，轻松封装有效期功能

2023-09-08 18:38:02

简单使用 localStorage

localStorage 是一种存储在浏览器中的键值对存储机制，与 cookie 不同，它不会随 HTTP 请求发送到服务器，因此更安全、更高效。

要使用 localStorage，首先需要获取 localStorage 对象：

const localStorage = window.localStorage;

然后，可以使用以下方法来存储和检索数据：

setItem(key, value)：将数据存储到 localStorage 中，其中 key 是数据的键，value 是要存储的数据。
getItem(key)：从 localStorage 中检索数据，其中 key 是要检索的数据的键。
removeItem(key)：从 localStorage 中删除数据，其中 key 是要删除的数据的键。
clear()：清除 localStorage 中的所有数据。

封装 localStorage 方法添加有效期设置功能

为了更好地管理数据在浏览器中的存储时间，我们可以封装一个 localStorage 方法，添加有效期设置功能。我们可以使用以下代码来实现：

function setItemWithExpiry(key, value, expiry) {
  const now = new Date();
  const expiryDate = new Date(now.getTime() + expiry);

  localStorage.setItem(key, JSON.stringify({
    value,
    expiryDate
  }));
}

function getItemWithExpiry(key) {
  const item = localStorage.getItem(key);
  if (!item) {
    return null;
  }

  const data = JSON.parse(item);
  const expiryDate = new Date(data.expiryDate);
  const now = new Date();

  if (now > expiryDate) {
    localStorage.removeItem(key);
    return null;
  }

  return data.value;
}

这个封装的方法 setItemWithExpiry 接受三个参数：key、value 和 expiry。expiry 参数可以是数字（毫秒数）或日期对象，指定数据的有效期。getItemWithExpiry 方法接受一个参数 key，用于检索数据并检查其是否已过期。如果数据已过期，它将从 localStorage 中删除并返回 null。