location.reload(true) 不会清空缓存。现代浏览器忽略该参数，仍可能复用内存或协商缓存；HTML按钮无法清除HTTP缓存，仅能清理localStorage等可编程存储，Service Worker缓存需主动注销并重载。
点击按钮触发 location.reload(true) 会清空缓存吗
不会。虽然 location.reload(true) 在旧规范中被解释为“强制从服务器重新加载”，但现代浏览器（Chrome、Firefox、Edge、Safari）已忽略该参数，实际行为等同于 location.reload() —— 它可能复用内存缓存或协商缓存（304），并不真正清除本地磁盘/内存中的 Cache-Control 或 ETag 缓存。
HTML 按钮本身无法直接清除浏览器缓存
这是关键前提：HTML 和 DOM 层面没有 API 允许网页脚本删除 localStorage 以外的缓存（如 HTTP 缓存、Service Worker 缓存、HTTP/2 推送缓存、DNS 缓存）。浏览器出于安全限制，禁止网页随意擦除其他站点或自身历史请求的资源缓存。
-
localStorage、sessionStorage、indexedDB可通过 JS 主动清理（例如localStorage.clear()） - HTTP 缓存（
disk cache）不由 JS 控制，只能靠响应头（如Cache-Control: no-store）或用户手动清空 - Service Worker 缓存需在 SW 脚本中调用
caches.delete(cacheName)，且主页面必须先unregister()再重注册才能生效 - 刷新时加随机查询参数（如
?t=1712345678）仅绕过缓存，不“清除”它
最接近“清除缓存”效果的实操方案
如果你的目标是让下一次页面加载**不使用任何旧缓存资源**，可组合以下手段，用一个按钮触发：
- 调用
localStorage.clear()和sessionStorage.clear()清掉键值存储 - 若用了 Service Worker：先
navigator.serviceWorker.getRegistrations()，再对每个registration.unregister()，然后location.reload() - 强制刷新并跳转带时间戳的 URL：
location.href = location.origin + location.pathname + '?t=' + Date.now()（注意：这会丢失history.state） - 对于开发调试，更可靠的做法是打开 DevTools → Network 标签页 → 勾选
Disable cache，或使用无痕窗口
示例按钮代码：
立即学习“前端免费学习笔记（深入）”；
<button onclick="clearAppCache()">清除应用缓存</button>
<script>
function clearAppCache() {
localStorage.clear();
sessionStorage.clear();
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(regs =>
Promise.all(regs.map(r => r.unregister()))
).then(() => location.reload());
} else {
location.href = location.origin + location.pathname + '?t=' + Date.now();
}
}
</script>
为什么不能一键清空所有缓存
这不是技术缺陷，而是设计原则：HTTP 缓存属于浏览器网络栈底层，由加载器（loader）和缓存策略模块管理，JS 运行在更高层的渲染引擎中，二者隔离。允许网页随意清空整个磁盘缓存会带来严重性能退化（每次都要重下 jQuery、React 等公共资源），也存在隐私风险（比如恶意站点探测你是否访问过某银行网站，通过检查其 logo 是否能秒加载来判断缓存是否存在）。
真正需要“彻底清缓存”的场景，通常只发生在开发阶段或内部管理系统中，此时应优先考虑构建时打 hash、配置强缓存失效策略，而不是依赖运行时按钮。
