LocalStorage不支持自动过期，但可通过嵌入版本号和时间戳实现手动过期策略：1. 定义全局语义化或时间戳版本号；2. 写入时封装version、timestamp和data；3. 读取时校验版本匹配与时间有效性；4. 提供按版本清理旧缓存工具。
LocalStorage 本身不支持自动过期，但可以通过在数据中嵌入版本号和时间戳，配合代码逻辑实现“手动过期”策略。核心思路是：每次读写缓存前，检查当前缓存的版本号是否匹配当前应用版本，同时可选地校验时间有效性。
1. 定义全局缓存版本号
把版本号作为常量统一管理，避免硬编码散落在各处。推荐从项目构建时注入（如 Webpack DefinePlugin 或 Vite 的 define），或直接写在配置文件里：
- 建议使用语义化版本（如 "2.3.0"）或时间戳（如 "20240520"），后者更便于强制刷新
- 版本号变更即视为所有旧缓存失效，适合大版本迭代或数据结构变动
2. 写入缓存时附带元信息
不要直接存原始值，而是封装成带 version 和 timestamp 的对象：
function setCache(key, value) {
const cacheItem = {
version: APP_VERSION, // 当前应用版本
timestamp: Date.now(), // 写入时间（毫秒）
data: value
};
localStorage.setItem(key, JSON.stringify(cacheItem));
}- timestamp 可用于后续做“相对过期”，比如只保留 24 小时内的缓存
- 避免直接覆盖 localStorage 原始值，否则老版本代码读取时可能解析失败
3. 读取时做版本与时效双重校验
读取后先解析，再判断是否可用：
立即学习“Java免费学习笔记（深入）”；
function getCache(key, options = {}) {
const { versionCheck = true, maxAgeMs = null } = options;
const itemStr = localStorage.getItem(key);
if (!itemStr) return null;
<p>try {
const item = JSON.parse(itemStr);
// 版本不匹配 → 视为过期
if (versionCheck && item.version !== APP_VERSION) return null;
// 时间超限 → 视为过期（maxAgeMs 为 0 或负数表示禁用时效检查）
if (maxAgeMs != null && maxAgeMs > 0 && Date.now() - item.timestamp > maxAgeMs) return null;
return item.data;
} catch (e) {
localStorage.removeItem(key); // 解析失败，清理脏数据
return null;
}
}- 错误处理很重要：JSON 解析失败说明缓存已损坏，应主动删除，避免后续反复报错
- maxAgeMs 设为 null 表示仅依赖版本号；设为 3600000（1 小时）则叠加时间限制
4. 提供一键清理旧版本缓存的工具函数
上线新版本后，可主动清理全部旧缓存（谨慎使用，建议只在关键升级时调用）：
function clearOldCache() {
Object.keys(localStorage).forEach(key => {
try {
const item = JSON.parse(localStorage.getItem(key));
if (item && typeof item === 'object' && item.version && item.version !== APP_VERSION) {
localStorage.removeItem(key);
}
} catch (e) {
// 忽略非 JSON 或格式异常的 key（如第三方库写入的）
}
});
}- 不建议每次启动都执行，可在首次检测到版本升级后触发一次
- 生产环境上线前，可通过灰度发布验证新旧版本兼容性，减少误删风险
这套策略不依赖浏览器机制，完全由代码控制，灵活且可控。关键是把版本号当作缓存生命周期的“开关”，而不是单纯标记，让缓存真正服务于业务演进节奏。
