HTML仪表盘真正离线可用只能靠Service Worker+Cache API，因localStorage仅存字符串数据、不缓存HTML/CSS/JS等运行资源，且无请求拦截能力；Application Cache已全面废弃。
HTML仪表盘无法靠 localStorage 或 sessionStorage 实现真正意义上的“离线缓存”——它们只存数据，不存 HTML、CSS、JS、图片等运行依赖资源。 真正能支撑仪表盘离线打开的，只有 Service Worker 配合 Cache API；而 Application Cache（.appcache）已被所有现代浏览器弃用，强行用会直接失败。
为什么不能只用 localStorage 存 JSON 数据？
仪表盘离线打不开，往往不是因为“数据没保存”，而是因为页面根本加载不起来：HTML 文件 404、main.js 加载失败、chart.min.js 报错、CSS 样式丢失。这些静态资源必须提前缓存，localStorage 对它们完全无能为力。
-
localStorage只支持字符串，存对象得JSON.stringify()，且容量通常限 5–10 MB，不适合存图表配置、历史日志等大体积结构化数据 - 它不控制网络请求流向，页面首次加载仍需联网获取 HTML 和脚本，断网时白屏或报错
- 没有版本控制机制，更新 JS 后旧缓存不会自动失效，容易引发逻辑错乱
Service Worker 是唯一可行的离线入口
它像一个运行在浏览器后台的“代理程序”，能在页面加载前拦截请求，并从缓存中返回资源。仪表盘要离线可用，必须注册并激活一个 service-worker.js，并在其中明确缓存关键路径。
- 必须通过 HTTPS（或
localhost）启用，HTTP 站点会被浏览器拒绝注册 - 缓存策略建议用
cache-first：优先读Cache API，失败再 fetch 网络；对仪表盘这类读多写少场景更稳 - 关键资源至少包括：
/index.html、/main.js、/styles.css、/assets/logo.png、第三方库如/node_modules/chart.js/dist/chart.umd.js - 注册代码要放在主页面的
script中，且需确保只执行一次：if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .catch(err => console.warn('SW registration failed:', err)); }
IndexedDB 适合存仪表盘的动态状态和历史数据
当你要离线记录用户操作、保存筛选条件、缓存最近 7 天的指标快照，localStorage 就太单薄了。IndexedDB 支持事务、索引、二进制数据，是唯一能替代后端数据库的客户端方案。
立即学习“前端免费学习笔记（深入）”；
- 不要在
Service Worker里直接操作IndexedDB—— 它不支持同步 API，应由主页面 JS 调用 - 建库时用语义化 objectStore 名，比如
dashboard-state存用户布局，metric-history存时间序列数据 - 注意清理策略：仪表盘若长期运行，未清理的旧数据会让 IndexedDB 占满配额（Chrome 默认约 60% 磁盘空间），可按时间戳定期
delete() - 示例打开库：
const request = indexedDB.open('DashboardDB', 2); request.onupgradeneeded = event => { const db = event.target.result; if (!db.objectStoreNames.contains('metric-history')) { db.createObjectStore('metric-history', { keyPath: 'timestamp' }); } };
最容易被忽略的一点：Service Worker 的生命周期独立于页面，更新 service-worker.js 文件后，旧 SW 不会立刻卸载，新缓存也不会生效——必须手动 skipWaiting + clients.claim，或让用户刷新两次。这点在仪表盘灰度发布时极易引发“部分用户看到旧版 UI”的问题。
