HTML缓存与本地存储是分工协作关系：HTTP缓存控制资源副本可用性，localStorage/IndexedDB管理用户数据持久化；二者生命周期、更新时机、作用域均不同，不可混用或相互替代。
HTML缓存（HTTP缓存）和本地存储（localStorage/IndexedDB）不是替代关系，而是分工明确的协作关系：HTTP缓存管“资源副本是否可用”，本地存储管“用户数据或状态是否可持久”。混用或错配会导致白屏、过期内容、同步失败等实际问题。
Cache-Control 和 localStorage 不能互相覆盖
很多人以为给 HTML 加了 Cache-Control: max-age=3600，再用 localStorage.setItem('theme', 'dark') 就算“双重保险”——其实完全不是。HTTP 缓存控制的是整个 HTML 文档（含内联脚本）是否从磁盘直接加载；而 localStorage 是 JS 运行时读取的独立键值区，两者生命周期、更新时机、作用域全都不一致。
- 用户刷新页面时，浏览器可能直接从 HTTP 缓存加载旧 HTML，里面嵌的 JS 仍会读取旧版
localStorage值，但若新版逻辑已改字段名（如从'theme'改成'uiMode'），就静默失效 -
localStorage没有版本号机制，也无法触发页面重载；HTTP 缓存却可能让页面连续数小时不重新请求 HTML，导致新功能永远不生效 - 敏感操作（如登录态）绝不能只靠
localStorage存 token——它明文可见、无过期、不随 HTTP 缓存刷新而清空
IndexedDB + Service Worker 才是真正协同的组合
当你要缓存媒体文件、离线表单、带附件的笔记等结构化数据时，localStorage 不够用，必须上 IndexedDB；但它自己无法拦截网络请求——得靠 Service Worker 调度。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
Service Worker在install阶段用cache.addAll()预存静态资源（HTML/CSS/JS/图标），确保离线可访问骨架 - 在
fetch事件中，对 API 请求（如/api/notes）不做 cache.match，而是转发到网络，并将响应解析后写入IndexedDB的notesobjectStore - 页面 JS 通过
idb.open()读取IndexedDB，渲染离线数据；同时监听navigator.serviceWorker.addEventListener('controllerchange')，提示用户“有新内容可同步” - 关键点：
IndexedDB写入必须包裹在事务中，且不能在Service Worker的fetch事件里直接 await——要用event.waitUntil()包住异步写入逻辑，否则事务可能被中断
meta 标签的 Cache-Control 只是弱补充，别依赖它
有些人在 HTML 里写 ，以为能强制每次验证。这几乎无效：
- 该
meta标签只在**没有服务器响应头**时才生效；只要服务器返回了Cache-Control头，浏览器就无视meta - 它无法控制子资源（CSS/JS/图片）的缓存行为，只影响当前 HTML 文档本身
- 移动端 WebView（如 Android 的
WebView）常忽略该标签，尤其在启用setAppCacheEnabled(true)旧配置时 - 真正要禁用 HTML 缓存，应在服务器侧设
Cache-Control: no-store或至少no-cache, must-revalidate
最易被忽略的一点：HTTP 缓存和本地存储的清理不是联动的。用户手动清除浏览器缓存，localStorage 和 IndexedDB 通常保留；反之清空 localStorage，HTTP 缓存照旧存在。线上出问题时，别只查 JS 逻辑，先用 DevTools 的 Application → Clear storage 真实模拟一次“全新用户”场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
