WebStorage需通过硬编码版本号主动清理缓存：启动时比对localStorage中app_version与CURRENT_VERSION，不匹配则清旧存新，并用localeCompare安全比较语义化版本。
HTML5 WebStorage 本身不支持自动过期或版本感知，要实现“配合版本号管理清理过期缓存”，关键不是等它自己失效，而是把版本号作为主动清理的触发开关——在应用启动时比对、发现不匹配就清旧存新，同时辅以时间戳做双重保险。
硬编码当前版本号并持久化存储
在 JS 入口处定义唯一、语义化的当前版本标识：
const CURRENT_VERSION = '2.3.1';
首次加载或每次发版后，将该版本写入 localStorage（推荐用 IndexedDB 存更稳妥，但 localStorage 足够轻量）：
立即学习“前端免费学习笔记（深入）”；
localStorage.setItem('app_version', CURRENT_VERSION);
注意：版本号必须硬编码，不能动态生成（如 Date.now() 或 git commit hash），否则构建不一致会导致迁移逻辑错乱。
启动时比对版本并触发清理/迁移
页面初始化后立即执行校验逻辑：
- 读取 localStorage 中已有的 'app_version' 值；
- 用 localeCompare() 安全比较语义化版本（例如 '2.2.0'.localeCompare('2.3.1') < 0）；
- 若本地版本
- 不建议直接 clear() 全局，而是按业务分组清理（如 removeItem('category_expanded')、removeItem('last-search-query')）；
- 清理后立即更新本地版本号，避免重复执行。
为关键缓存项添加时间戳 + 版本联合判断
仅靠版本号无法应对“同版本下数据自然过期”的场景（比如二级列表 24 小时未刷新）。可对重要元数据做双维度控制：
- 写入时存对象：
{ value: 'mobile', timestamp: Date.now(), version: '2.3.1' }； - 读取时先检查 version 是否匹配 CURRENT_VERSION，再检查 timestamp 是否超期（如超过 12 小时）；
- 任一不满足，就视为无效，自动删除该项并返回 null；
- 这种模式适合缓存展开状态、选中 ID、最后加载时间等轻量控制信息，而非实体数据。
与静态资源版本联动，避免逻辑-数据错配
如果 HTML/CSS/JS 已升级到 v2.3.1，但 localStorage 还是 v2.2.0 的结构，新代码很可能读取出错或静默失败。因此：
- 确保构建流程中，CURRENT_VERSION 同步注入到 JS 和 Service Worker 的 cacheName（如 'static-v2.3.1'）；
- Service Worker 激活时，可顺便调用 caches.delete() 清理旧缓存，形成“资源+数据”双版本对齐；
- 用户登出、切换账号等敏感操作，也应无条件清除版本相关缓存，不依赖比对逻辑。
