HTML5中LocalStorage存储静态资源指纹达成增量更新

LocalStorage通过存储资源哈希指纹实现增量更新：构建时生成manifest.json，运行时存入localStorage，加载前校验哈希一致性，仅更新变动文件，需配合buildId兜底、避免内容直存、注意跨域与降级策略。

LocalStorage 本身不能直接存储静态资源（如 JS、CSS、图片），但可以用来存资源的“指纹”（比如哈希值），配合前端加载逻辑，实现静态资源的增量更新和缓存控制。

为什么用指纹 + LocalStorage 做增量更新

传统浏览器缓存依赖 HTTP Header（如 Cache-Control、ETag），但无法精准控制“某次发布只更新部分文件”。而将资源路径加上内容哈希（如 app.a1b2c3.js），再把当前生效的哈希列表存在 LocalStorage 中，就能在页面加载时比对：只拉取本地没有或哈希不匹配的资源，跳过未改动的部分。

核心流程：生成指纹 → 存储 → 加载时校验

• 构建阶段：打包工具（如 Webpack/Vite）为每个静态资源生成唯一哈希，输出清单（如 manifest.json），内容类似：
  {"main.js": "d41d8cd98f00b204e9800998ecf8427e", "style.css": "5d41402abc4b2a76b9719d911017c592"}
• 运行时初始化：页面首次加载或检测到新版本时，请求 manifest.json，把资源名与哈希写入 LocalStorage，例如：
  localStorage.setItem('assetFingerprints', JSON.stringify(manifest))
• 资源加载前校验：动态插入 script/link 标签前，先读 LocalStorage 中对应资源的哈希；若不存在，或与当前 URL 中的哈希不一致（说明服务端已更新），则强制添加时间戳或更换 URL 后再加载。

关键细节：避免缓存误判和降级风险

• LocalStorage 的指纹只是客户端“快照”，需配合服务端版本号或时间戳做兜底。例如每次发布生成一个 buildId，存入 HTML 模板或通过 API 获取，比对不一致就清空旧指纹并全量更新。
• 不要把整个资源内容存进 LocalStorage（有 5–10MB 限制且阻塞主线程），只存轻量指纹映射。
• 注意跨域限制：LocalStorage 是协议+域名+端口三级隔离，子域名间不共享；微前端场景需统一主应用管理指纹。
• 加载失败时要有 fallback：比如脚本加载超时，回退到旧哈希路径，或提示用户刷新。

一个极简的资源加载校验示例

假设已知当前 app.js 应该是 app.8f3a2d.js：

const stored = JSON.parse(localStorage.getItem('assetFingerprints') || '{}');const expectedHash = stored['app.js'];const currentUrl = `app.${expectedHash}.js`;if (!expectedHash || !document.querySelector(`script[src="${currentUrl}"]`)) {  const s = document.createElement('script');  s.src = currentUrl;  s.onload = () => localStorage.setItem('app.js-hash', expectedHash);  document.head.appendChild(s);}