在开发者工具(DevTools)中,有几种方法可以只清除 CSS/JS 等静态资源缓存,而完美保留 Cookie(保持登录状态)。
以下是按推荐程度排序的几种方法:
方法一:最精准控制(使用 Application 面板)
如果你确实需要“清除”已经缓存的文件,而不是仅仅绕过缓存,这是最符合你需求的方法。
- 按
F12(或右键 -> 检查)打开开发者工具。 - 切换到 Application(应用) 面板(如果看不到,点击面板顶部的
>>箭头展开)。 - 在左侧边栏点击最上方的 Storage(存储) 。
- 点击右侧的 Clear site data(清除网站数据) 按钮。
- 关键步骤:在弹出的勾选框中,取消勾选
Cookies(以及你不想清除的 Web SQL、IndexedDB 等),只保留Cache storage(缓存存储)和Local storage(如果你也想清本地存储的话)。 - 点击 Clear(清除) 。 这样操作只会清除该网站的 CSS/JS 缓存,你的登录状态(Cookie)会完好无损。
方法二:开发期间最推荐(禁用缓存 Disable cache)
这是前端开发时最常用、最爽的方式,连“清除”这个动作都省了。
- 按
F12打开开发者工具。 - 切换到 Network(网络) 面板。
- 在面板顶部找到并勾选
Disable cache (禁用缓存) 。 - 效果:只要你的开发者工具处于打开状态,浏览器就绝对不会使用任何 CSS/JS 缓存。你修改代码后,直接按普通的
F5 刷新即可,Cookie 完全不受影响。 注意:关闭开发者工具后,此设置会失效。
方法三:最快捷的“硬刷新”(Hard Reload)
如果你不想打开 Application 面板,也不想一直勾选 Disable cache,可以使用硬刷新。硬刷新会强制浏览器忽略当前页面的缓存重新下载资源,但不会清除 Cookie。
- Windows / Linux: 按住
Ctrl 键,然后按F5;或者按Ctrl + Shift + R。 - Mac: 按住
Cmd +Shift,然后按R。 (提示:在 Chrome 中,如果你长按地址栏旁边的“刷新”按钮,会弹出一个菜单,里面也有“清空缓存并硬性重新加载”的选项,效果一样且不会清 Cookie。)
方法四:只清除单个特定的 CSS/JS 文件
如果你发现只有某一个特定的 JS 或 CSS 文件缓存了,其他的都没问题:
- 打开 Network(网络) 面板。
- 刷新页面,找到那个被缓存的文件(Status 显示为
(disk cache) 或(memory cache))。 - 右键点击该文件请求。
- 选择
Clear browser cache (清除浏览器缓存) 。(注:较新版本的 Chrome 中,右键菜单可能没有这个选项,如果有,它通常只清除该域名的缓存;如果没有,请使用方法一或方法三)。
💡 额外的小建议:URL 参数防缓存(开发习惯)
在开发阶段,如果你引入了第三方的 CSS/JS,或者担心用户端缓存,可以在引入时加上版本号或时间戳参数,强制浏览器认为这是一个新文件:
<!-- 每次修改后,手动改一下 ?v= 后面的数字 -->
<script src="app.js?v=1.0.2"></script>
总结建议: 日常写代码时,直接打开 F12 勾选 Network -> Disable cache,一劳永逸;偶尔遇到玄学缓存问题,直接 Ctrl + F5 硬刷新。彻底告别去浏览器设置里清理数据导致 Cookie 丢失的烦恼。