浏览器怎么清理缓存？

面试速答（30 秒版 TL;DR）

“清理缓存”不是一个动作，而是一组动作，至少要区分 HTTP 缓存、Cookie / Web Storage、IndexedDB、Cache Storage、Service Worker。
普通刷新 不等于清缓存；强制刷新（Hard Reload） 更像“这次别用旧资源，重新拉”；清除此站点数据 才更接近“把这个站点本地痕迹整体清掉”。
如果是 开发调试，优先用 DevTools 的 Disable cache、Hard Reload、Empty Cache and Hard Reload；如果是 用户故障排查，优先清当前站点数据，而不是上来就清整个浏览器历史。
面试里最加分的一句话是：线上缓存问题的根治通常不是教用户清缓存，而是把资源指纹、缓存头和更新策略设计对。

先把“缓存”拆开：你到底想清哪一层

很多人说“浏览器缓存有问题”，其实可能是这几类完全不同的数据：

HTTP 缓存：图片、JS、CSS、接口响应的缓存副本
Cookie：会话标识、登录态等会随请求发送的小数据
Web Storage：localStorage、sessionStorage
IndexedDB：结构化离线数据
Cache Storage：PWA / Service Worker 常用的 Request/Response 缓存
Service Worker：可能继续拦截请求、兜底离线资源

所以第一原则不是“怎么清”，而是：

先判断问题落在哪一层，再选动作。

一张图看懂怎么选

先按“你到底想解决哪类缓存问题”来选动作。

真正要背的是：先定位缓存层，再选对应清理动作。

最常见的 4 种清理方式

动作	典型会影响什么	通常不会影响什么	适合场景
普通刷新 `F5`	重新发起页面请求，可能走协商缓存	不会主动清 Cookie、`localStorage`、IndexedDB	日常刷新
强制刷新 `Ctrl+F5` / `Cmd+Shift+R`	更倾向于跳过当前资源缓存重新拉取	不会删除站点本地存储	前端刚发布，页面资源疑似没更新
`Disable cache`	DevTools 打开期间尽量不使用网络缓存	不会清站点存储，也不是长期设置	开发调试、抓包
清除此站点数据	Cookie、Storage、部分缓存、离线数据	其它网站的数据	某个站点登录异常、页面状态脏了、PWA 数据错乱

说明：以下操作路径主要以 Chromium 内核浏览器（Chrome / Edge，2026 年常见版本） 为例。Firefox、Safari 菜单名字可能不同，但动作分类基本一致。

1. 普通刷新、强制刷新、Empty Cache and Hard Reload 到底差在哪

普通刷新

普通刷新会重新请求页面，但浏览器依然可能：

直接命中强缓存
走协商缓存，得到 304
继续使用已有的站点存储数据

所以它解决的是“再试一次”，不是“彻底清理”。

强制刷新（Hard Reload）

强制刷新的核心是：

这一次尽量别信当前缓存副本，重新拉资源

它常用于：

前端静态资源刚发版
CSS / JS 似乎没更新
DevTools 里想快速验证最新构建产物

但要注意：

它通常不会删除 localStorage
也不会删除 IndexedDB
也不是“把浏览器缓存彻底清空”

所以更准确的理解是：

Hard Reload 更像“跳过这次资源复用”，不是“清空所有本地数据”。

Empty Cache and Hard Reload

在 Chromium 浏览器里，打开 DevTools 后长按刷新按钮，常能看到：

Normal Reload
Hard Reload
Empty Cache and Hard Reload

第三个动作更接近：

先清理当前页面相关的网络缓存
再做一次强制刷新

但它依然不等于：

清空整个浏览器所有缓存
删除站点下全部 Cookie / Storage

2. 真正“按站点清理”该怎么做

如果你要处理的是：

登录状态异常
页面明明刷新了，但业务数据还是旧的
某个站点 UI 状态、离线数据、草稿缓存出错

那更合适的往往不是 Hard Reload，而是：

清当前站点数据（Clear site data）

常见路径有两类：

路径 A：地址栏站点设置

点击地址栏左侧站点图标
进入站点设置
找到清除数据或重置权限的相关入口

适合普通用户操作。

路径 B：DevTools -> Application

打开 DevTools
进入 Application
找到 Storage / Clear storage
执行 Clear site data

这个入口更适合开发排查，因为你能看到：

Cookie
localStorage
sessionStorage
IndexedDB
Cache Storage
Service Worker

通常哪些项会被清掉，浏览器界面会明确列出来；以 UI 实际勾选项为准，不要死背。

3. 开发调试时，为什么更推荐 `Disable cache`

很多前端调试缓存问题，不是真的要“删除数据”，而只是：

本地联调时不要命中旧资源
每次刷新都走真实网络请求

这时最省事的是：

打开 DevTools
勾选 Network 面板里的 Disable cache

它的优点是：

不会误删登录态和业务数据
不会影响其它站点
关闭 DevTools 后行为通常恢复

所以团队里更稳的习惯是：

联调看最新资源，用 Disable cache
站点数据脏了，再清 site data

4. 如果是 PWA / 离线缓存问题，只清 HTTP 缓存往往不够

这是最容易踩坑的一类。

如果站点使用了 Service Worker，那么就算你强制刷新：

请求仍可能被 Service Worker 拦截
响应仍可能来自 Cache Storage
离线页面或旧壳资源仍可能继续生效

这时正确动作通常是两步：

删除 Cache Storage
注销 Service Worker

否则你会发现：

资源明明已经重新部署
页面却还在拿离线旧包

这也是为什么很多“怎么都刷不掉”的缓存问题，本质不是浏览器 HTTP 缓存，而是：

PWA 缓存层没有正确更新。

5. 用代码能不能自己清缓存

能清一部分，但不是全部。

能清的

当前源下、JS 有权限访问的数据，通常可以清：

localStorage.clear()
sessionStorage.clear()

const clearCacheStorage = async () => {
  const keys = await caches.keys()
  await Promise.all(keys.map((key) => caches.delete(key)))
}

const unregisterAllServiceWorkers = async () => {
  const registrations = await navigator.serviceWorker.getRegistrations()
  await Promise.all(registrations.map((registration) => registration.unregister()))
}

如果浏览器支持 indexedDB.databases()，还可以枚举后删除数据库：

const deleteAllIndexedDB = async () => {
  if (!indexedDB.databases) return

  const databases = await indexedDB.databases()
  await Promise.all(
    databases
      .map((db) => db.name)
      .filter(Boolean)
      .map(
        (name) =>
          new Promise((resolve, reject) => {
            const request = indexedDB.deleteDatabase(name)
            request.onsuccess = () => resolve(name)
            request.onerror = () => reject(request.error)
            request.onblocked = () => reject(new Error(`delete blocked: ${name}`))
          }),
      ),
  )
}

不能直接清的

前端页面脚本通常不能可靠处理这些内容：

HttpOnly Cookie
整个浏览器的全局网络缓存
其它站点的数据
用户浏览历史

也就是说：

JS 能清“自己有权访问的站点数据”，但清不了浏览器级和安全受限的数据。

6. 线上发布后，为什么不该靠“让用户清缓存”解决

这是面试和工程里都很重要的一点。

如果一个前端项目每次发版都要通知用户：

清浏览器缓存
强制刷新
重新打开页面

那通常说明你的缓存策略本身有问题。

更合理的做法是：

静态资源文件名带内容哈希
JS / CSS 走长缓存
HTML 入口页走短缓存或协商缓存
Service Worker 做版本切换和旧缓存淘汰

也就是把“让浏览器自动拿到新资源”的链路设计对，而不是把运维成本转嫁给用户。

典型题 & 标准答法

Q1：浏览器怎么清理缓存？

答：先区分缓存层。若只是想重新拉最新静态资源，可以用 Hard Reload 或 DevTools 的 Disable cache；若要把某个站点的 Cookie、localStorage、IndexedDB、Cache Storage 等整体清掉，应使用 Clear site data；若是 PWA 问题，还要额外删除 Cache Storage 并注销 Service Worker。不要把“刷新页面”和“清缓存”混为一谈。

Q2：为什么强制刷新还不够？

答：因为强制刷新主要解决的是网络资源重新拉取，但它通常不会删除站点本地存储，也未必能绕过 Service Worker 的离线缓存。如果问题在 localStorage、IndexedDB 或 Cache Storage，单纯 Hard Reload 可能无效。

Q3：用户反馈页面一直是旧版本，前端应该怎么排查？

答：先确认静态资源是否带 hash，HTML 缓存头是否合理，再检查是否有 Service Worker 接管请求。如果只是本机调试问题，可先用 Disable cache 和 Hard Reload；如果线上很多用户都要手动清缓存，通常说明缓存策略设计有缺陷。

常见追问

Ctrl+F5 和 F5 到底有什么区别？
Disable cache 为什么要求 DevTools 打开？
为什么清掉 HTTP 缓存后，页面数据还是旧的？
Service Worker 和 Cache Storage 在缓存链路里分别扮演什么角色？

易错点

不要把“刷新页面”说成“清缓存”。
不要以为 Hard Reload 会删除 localStorage、IndexedDB、Cookie。
不要忽略 Service Worker。很多顽固旧资源问题其实卡在离线缓存层。
不要把“让用户清缓存”当成正常发布流程，这通常意味着缓存治理没做好。
不要写 location.reload(true) 这种过时心智。现代浏览器里它不该被当成可靠的强刷方案。

速记要点

刷新是重新请求，清缓存是删除本地副本，它们不是一回事。
只拉最新资源：Hard Reload / Disable cache。
只清当前站点：Clear site data。
PWA 旧包问题：删 Cache Storage + 注销 Service Worker。
工程根治：资源指纹 + 合理缓存头 + 正确更新策略。

面试速答（30 秒版 TL;DR）​

先把“缓存”拆开：你到底想清哪一层​

一张图看懂怎么选​

最常见的 4 种清理方式​

1. 普通刷新、强制刷新、Empty Cache and Hard Reload 到底差在哪​

普通刷新​

强制刷新（Hard Reload）​

Empty Cache and Hard Reload​

2. 真正“按站点清理”该怎么做​

路径 A：地址栏站点设置​

路径 B：DevTools -> Application​

3. 开发调试时，为什么更推荐 Disable cache​

4. 如果是 PWA / 离线缓存问题，只清 HTTP 缓存往往不够​

5. 用代码能不能自己清缓存​

能清的​

不能直接清的​

6. 线上发布后，为什么不该靠“让用户清缓存”解决​

典型题 & 标准答法​

Q1：浏览器怎么清理缓存？​

Q2：为什么强制刷新还不够？​

Q3：用户反馈页面一直是旧版本，前端应该怎么排查？​

常见追问​

易错点​

速记要点​