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);
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
