为什么需要带过期时间的存储？

localStorage 允许我们在浏览器中存储数据，并且这些数据在页面重新加载或关闭后仍然保存。项目开发中有时需要让数据在指定时间后失效，例如用户登录后的 Token 有效期。

但 localStorage 不支持直接存储带过期时间的数据。本文通过两个简单的函数，为它实现定时存储的能力。

实现思路

保存数据时，创建一个同时包含“实际值”和“过期时间”的对象，将其转换为 JSON 字符串后存入 localStorage。

读取数据时，先判断该对象是否存在及是否过期：如果过期就删除该项并返回 null；否则返回其中保存的值。

实现代码

// 设置带有过期时间的键值对到 localStorage 中
function setLocalStorageWithExpire(key, value, expireTime) {
  // 获取当前时间戳，并计算过期时间戳
  const now = new Date().getTime();
  const expires = now + expireTime;

  const item = {
    value,
    expires,
  };

  // 将对象转换为 JSON 字符串后存储
  localStorage.setItem(key, JSON.stringify(item));
}

// 从 localStorage 中获取带有过期时间的键值对
function getLocalStorageWithExpire(key) {
  const itemStr = localStorage.getItem(key);

  // 数据不存在时返回 null
  if (!itemStr) {
    return null;
  }

  const item = JSON.parse(itemStr);
  const now = new Date().getTime();

  // 数据过期时删除该项并返回 null
  if (now > item.expires) {
    localStorage.removeItem(key);
    return null;
  }

  return item.value;
}

使用示例

// 设置 Token，过期时间为 1 小时（单位：毫秒）
setLocalStorageWithExpire('userToken', 'abcdef123456', 1000 * 60 * 60);

// 过一段时间后，尝试获取 Token
const token = getLocalStorageWithExpire('userToken');

if (token) {
  console.log('该用户 Token 为：', token);
} else {
  console.log('用户未登录或登录已过期');
}

总结

通过这两个简单的函数，我们可以在 localStorage 中实现带过期时间的键值存储，从而更灵活地管理应用数据。