“卸净”HTML5缓存需同步清除四层：HTTP缓存（Ctrl+F5或禁用cache）、DOM存储（localStorage/sessionStorage.clear()）、IndexedDB（Application中删除）、Service Worker及Cache API（Unregister+Delete）。
测试机上“卸净”HTML5缓存，不是删一个文件就能完事——它分散在浏览器多个独立存储层里，漏掉任意一层（比如 Service Worker 或 IndexedDB），就可能让旧逻辑继续跑、数据残留、UI 表现错乱。
清除常规缓存 + 强制跳过缓存加载
这是最表层但高频出问题的一环：浏览器把 HTML/CSS/JS 当作静态资源缓存，哪怕你改了服务器上的文件，测试机仍可能拉旧版本。
- 快捷键硬刷最直接：
Ctrl + F5（Windows/Linux）或Cmd + Shift + R（Mac），绕过本地缓存发请求 - 若需彻底清空：按
Ctrl + Shift + Delete→ 时间范围选“所有时间” → 仅勾选“缓存的图像和文件”，避免误删登录态 - 开发调试时，打开开发者工具 →
Network标签页 → 勾选Disable cache，之后所有刷新都走网络（关掉开发者工具后失效）
手动清空 HTML5 存储机制（localStorage / sessionStorage / IndexedDB）
这些不会随常规缓存清理而消失，是测试机“看似清了却还留着旧数据”的元凶。尤其 localStorage 常被用来存用户偏好、token、mock开关等测试配置。
- 进目标页面 →
F12→ 切到Console→ 执行：localStorage.clear();
sessionStorage.clear(); - 要删结构化数据（比如离线列表、缓存的 API 响应）：开发者工具 →
Application→ 左侧展开IndexedDB→ 右键对应数据库 →Delete database - 注意：
sessionStorage是页面级的，关掉标签页自动清；但测试中常开多个标签反复切，必须手动清
注销 Service Worker 并清空 Cache API 缓存
现代 PWA 或离线优先应用几乎必用 Service Worker，它能长期驻留后台、拦截请求、返回缓存响应——即使你删了浏览器缓存，它照样“自作主张”返回旧 JS。
立即学习“前端免费学习笔记（深入）”；
- 开发者工具 →
Application→ 左侧点Service Workers→ 点Unregister（如有“Skip waiting”按钮也点一下） - 同一页面下，
Application→Cache Storage→ 展开查看是否有缓存名（如v1-cache）→ 右键 →Delete - 代码级清理（适合集成进测试脚本）：
caches.keys().then(keys => {
keys.forEach(key => caches.delete(key));
});
验证是否真“卸净”：无痕窗口 + 检查 Network 请求头
别信“我点过了”，得看证据。很多团队卡在“以为清了，其实没清”，就是因为缺这步验证。
- 新开无痕窗口（
Ctrl + Shift + N）访问页面：它不读任何已有缓存，也不写新缓存，是最干净的对照组 - 开发者工具 →
Network→ 刷新页面 → 看关键 JS/CSS 文件的Status：要是200（不是200 (from disk cache)或304），说明确实从服务端拉的新资源 - 顺手检查响应头：
Cache-Control: no-cache或max-age=0是理想状态；若看到max-age=31536000，说明服务器还在强缓存，得去后端配
真正“卸净”的难点不在操作多，而在层次多：HTTP 缓存、DOM 存储、索引数据库、后台服务脚本，四层互不干扰。测试机一旦漏掉一层，就可能把上一轮测试的脏数据带进下一轮，导致 bug 复现不了、结果不可信。动手前先想清楚——你到底要清哪一层？
