LocalStorage本身不支持自动过期，需手动实现：写入时存数据+时间戳，读取时校验并清理过期项；推荐封装为工具类统一处理异常、默认TTL及扩展能力。
LocalStorage 本身不支持自动过期，要实现带时间戳的缓存过期机制，核心思路是：**每次写入时存入数据 + 过期时间戳；读取时先校验时间戳是否有效，无效则清除并返回空值。**
存入时附带过期时间戳
把原始数据和过期时间（如毫秒时间戳）一起序列化后存入。推荐用对象结构，清晰且易扩展：
- 计算过期时间：例如 10 分钟后过期 → Date.now() + 10 * 60 * 1000
- 组合数据：注意不要直接拼字符串，要用 JSON 安全封装
- 示例写法：
function setWithExpiry(key, value, ttlMinutes = 10) {
const item = {
value: value,
expiry: Date.now() + ttlMinutes * 60 * 1000
};
localStorage.setItem(key, JSON.stringify(item));
}读取时自动校验并清理过期项
读取时先解析，再比对当前时间与 expiry，过期就主动删除并返回 null/undefined：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 避免下次重复校验失败，提升性能
- 防止过期脏数据长期残留
- 示例读取逻辑：
function getWithExpiry(key) {
const itemStr = localStorage.getItem(key);
if (!itemStr) return null;
<p>const item = JSON.parse(itemStr);
if (Date.now() > item.expiry) {
localStorage.removeItem(key); // 主动清理
return null;
}
return item.value;
}封装成可复用的工具类（推荐）
把 set/get 逻辑收拢，还能统一处理 JSON 解析异常、类型安全等边界情况：
立即学习“Java免费学习笔记（深入）”；
- 支持自定义默认过期时间
- get 方法可选是否静默失败（不抛错）
- 可扩展支持加密、命名空间前缀等高级能力
- 简单封装示意：
class ExpiringStorage {
constructor(defaultTTL = 10) {
this.defaultTTL = defaultTTL * 60 * 1000;
}
set(key, value, ttl = this.defaultTTL) {
const item = { value, expiry: Date.now() + ttl };
try {
localStorage.setItem(key, JSON.stringify(item));
} catch (e) {
// 处理 QuotaExceededError 等异常
console.warn('LocalStorage full or unavailable', e);
}
}
get(key) {
try {
const itemStr = localStorage.getItem(key);
if (!itemStr) return null;
const item = JSON.parse(itemStr);
if (Date.now() > item.expiry) {
localStorage.removeItem(key);
return null;
}
return item.value;
} catch (e) {
localStorage.removeItem(key);
return null;
}
}
}注意事项与避坑点
实际使用中容易忽略但关键的细节：
- 时间依赖客户端本地时钟：用户手动改系统时间会导致误判，无法完全规避，业务敏感场景需配合服务端时间校验
- localStorage 是同步阻塞 API：高频读写可能影响主线程，大数据量建议节流或改用 IndexedDB
- 不同域名/协议/端口间 localStorage 完全隔离：跨子域需用 postMessage + iframe 共享，不能直接访问
- 不适用于敏感信息缓存：LocalStorage 可被 XSS 直接读取，勿存 token、密码等
