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);

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

注意：版本号必须硬编码，不能动态生成（如 Date.now() 或 git commit hash），否则构建不一致会导致迁移逻辑错乱。

启动时比对版本并触发清理/迁移

页面初始化后立即执行校验逻辑：

• 读取 localStorage 中已有的 'app_version' 值；
• 用 localeCompare() 安全比较语义化版本（例如 '2.2.0'.localeCompare('2.3.1')
• 若本地版本
• 不建议直接 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() 清理旧缓存，形成“资源+数据”双版本对齐；
• 用户登出、切换账号等敏感操作，也应无条件清除版本相关缓存，不依赖比对逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！