怎么通过HTML5中LocalStorage实现带有效期的本地数据缓存过期逻辑-H5教程-PHP中文网

LocalStorage本身不支持自动过期，需手动存储时间戳和过期时间并读取时校验；过期则删除并返回null，未过期返回原始数据；可封装为set/get工具类，但依赖客户端时间且无后台清理。

怎么通过html5中localstorage实现带有效期的本地数据缓存过期逻辑

LocalStorage 本身不支持自动过期，但可以通过在存储数据时附带时间戳，并在读取时检查是否过期，来模拟“带有效期”的缓存逻辑。关键在于手动维护过期判断，而不是依赖浏览器机制。

存储时写入时间戳和过期时间

把原始数据和元信息（如写入时间、有效毫秒数）一起序列化为对象再存入 LocalStorage：

例如：要缓存用户信息并设置 10 分钟有效期，可这样存：

const data = { name: "张三", avatar: "/img/1.png" };
const ttlMs = 10 * 60 * 1000; // 10分钟
const item = {
  value: data,
  timestamp: Date.now(),
  expiresAt: Date.now() + ttlMs
};
localStorage.setItem("user_profile", JSON.stringify(item));

读取时校验是否过期

每次 getItem 后先解析，再比对当前时间与 expiresAt：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

若已过期，主动删除并返回 null，避免后续误用
若未过期，返回 value 字段内容

function getWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;
<p>const item = JSON.parse(itemStr);
if (Date.now() > item.expiresAt) {
localStorage.removeItem(key);
return null;
}
return item.value;
}</p><p>// 使用
const profile = getWithExpiry("user_profile"); // 过期则返回 null，否则返回原始数据</p>