JavaScript 中 LocalStorage 怎么设置带有时间戳的缓存-js教程-PHP中文网

localstorage 本身不支持自动过期，但可通过存入时间戳+读取时校验实现带过期的缓存：写入时封装数据与时间戳为对象并 json 序列化，读取时解析并比对当前时间与过期阈值，超时则清除并返回 null 或默认值。

javascript 中 localstorage 怎么设置带有时间戳的缓存

LocalStorage 本身不支持自动过期，但可以通过手动存入时间戳 + 读取时校验的方式实现“带时间戳的缓存”。核心思路是：每次写入时同时保存数据和当前时间戳；读取时先检查时间戳是否过期，再决定返回数据还是清除缓存。

存入带时间戳的数据

把原始数据和时间戳（推荐用毫秒数）一起封装为对象，再转成 JSON 存入 LocalStorage：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function setCache(key, value, expireMs = 5 * 60 * 1000) {
  const item = {
    data: value,
    timestamp: Date.now(),
    expireMs
  };
  localStorage.setItem(key, JSON.stringify(item));
}
// 示例：缓存用户信息，10 分钟后过期
setCache('userInfo', { name: '张三', id: 123 }, 10 * 60 * 1000);

读取并自动校验过期

读取时先解析 JSON，再比对当前时间和存储的时间戳，过期则清除并返回 null：

function getCache(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;
<p>try {
const item = JSON.parse(itemStr);
const now = Date.now();
if (now - item.timestamp > item.expireMs) {
localStorage.removeItem(key);
return null;
}
return item.data;
} catch (e) {
localStorage.removeItem(key);
return null;
}
}
// 示例
const user = getCache('userInfo'); // 过期则返回 null，未过期返回 { name: '张三', id: 123 }</p>

封装成更实用的工具函数

可以合并读写逻辑，支持设置默认值、简化调用：

const Cache = {
  set(key, value, maxAgeSeconds = 300) {
    const item = {
      data: value,
      timestamp: Date.now(),
      expireMs: maxAgeSeconds * 1000
    };
    localStorage.setItem(key, JSON.stringify(item));
  },
  get(key, defaultValue = null) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return defaultValue;
<pre class="brush:php;toolbar:false;">try {
  const item = JSON.parse(itemStr);
  if (Date.now() - item.timestamp > item.expireMs) {
    localStorage.removeItem(key);
    return defaultValue;
  }
  return item.data;
} catch {
  localStorage.removeItem(key);
  return defaultValue;
}

}, remove(key) { localStorage.removeItem(key); } };

// 使用 Cache.set('token', 'abc123', 3600); // 1 小时后过期 const token = Cache.get('token');