HTML5中封装具备过期时间的LocalStorage增强库-H5教程-PHP中文网

localStorage本身不支持过期机制，需通过封装在写入时记录时间戳、读取时校验并自动清理来实现；ExpiringStorage类提供set/get/remove/clear/ttl等方法，支持前缀隔离与异常容错。

html5中封装具备过期时间的localstorage增强库

HTML5 的 localStorage 本身不支持过期机制，所有数据永久保存（除非手动清除）。要实现带过期时间的本地存储，需在写入时记录时间戳，在读取时校验是否过期。下面是一个轻量、无依赖的增强封装方案。

核心设计思路

不修改原生 localStorage API，而是通过包装一层逻辑来实现「自动过期」：

写入时：将原始值与当前时间戳、过期毫秒数一起序列化为对象，再存入 localStorage
读取时：反序列化后检查 expiresAt 是否已过期；若过期则自动删除并返回 null
删除/清空操作同步代理到底层 localStorage

简易实现代码（ES6+）

以下为可直接使用的工具类：

class ExpiringStorage {
  constructor(prefix = 'exp_') {
    this.prefix = prefix;
  }
<p>set(key, value, expiresMs) {
const item = {
value,
createdAt: Date.now(),
expiresAt: expiresMs ? Date.now() + expiresMs : null
};
try {
localStorage.setItem(this.prefix + key, JSON.stringify(item));
} catch (e) {
// 忽略 QuotaExceededError 等异常
console.warn('ExpiringStorage.set failed:', e);
}
}</p><p>get(key) {
const itemStr = localStorage.getItem(this.prefix + key);
if (!itemStr) return null;</p><pre class="brush:php;toolbar:false;">try {
  const item = JSON.parse(itemStr);
  if (item.expiresAt !== null && Date.now() > item.expiresAt) {
    this.remove(key);
    return null;
  }
  return item.value;
} catch (e) {
  this.remove(key); // 解析失败则清理脏数据
  return null;
}

}

remove(key) { localStorage.removeItem(this.prefix + key); }

clear() { Object.keys(localStorage) .filter(k => k.startsWith(this.prefix)) .forEach(k => localStorage.removeItem(k)); }

// 可选：获取剩余有效期（毫秒），-1 表示永不过期，0 或负数表示已过期 ttl(key) { const itemStr = localStorage.getItem(this.prefix + key); if (!itemStr) return null; try { const item = JSON.parse(itemStr); if (item.expiresAt === null) return -1; return Math.max(0, item.expiresAt - Date.now()); } catch { return null; } } }

// 使用示例 const storage = new ExpiringStorage(); storage.set('token', 'abc123', 5 60 1000); // 5 分钟后过期 console.log(storage.get('token')); // 有效期内返回 'abc123'，过期后返回 null