JavaScript 中怎么清除浏览器的强缓存与协商缓存数据-js教程-PHP中文网

javascript无法直接清除浏览器强缓存或协商缓存，但可通过url加版本号、fetch配置cache选项、service worker缓存api、清除本地存储等方式实现逻辑清除。

javascript 中怎么清除浏览器的强缓存与协商缓存数据

JavaScript 本身无法直接清除浏览器已存的强缓存或协商缓存数据（比如已存在磁盘/内存中的 HTML、JS、CSS、图片等资源副本），因为这些缓存由浏览器底层管理，出于安全限制，前端 JS 没有权限批量删除它们。但你可以通过主动规避、强制跳过、或覆盖策略，让浏览器在后续请求中不使用旧缓存，从而达到“逻辑上清除”的效果。关键在于区分目标：

强缓存（Cache-Control: max-age=3600, Expires）：命中则完全不发请求，直接读本地副本
协商缓存（Last-Modified / ETag + 304 Not Modified）：发请求，服务器判定后返回 304，仍用本地副本

下面分场景说明可行且实用的方法：

强制绕过强缓存：让每次请求都走新路径

浏览器只对完全相同的 URL 复用强缓存。因此，只要让 URL 变得“不一样”，就能跳过强缓存。

在资源链接末尾添加唯一查询参数

// 动态加载 JS 时加时间戳
const script = document.createElement('script');
script.src = '/app.js?t=' + Date.now(); // 或用版本号：'?v=2.1.0'
document.head.appendChild(script);

加载 CSS、图片等静态资源时同理

<link rel="stylesheet" href="/style.css?v=2.1.0">
@@##@@">

使用 fetch 请求时禁用缓存

fetch('/api/data', { cache: 'no-store' }); // 完全不缓存（推荐）
// 或
fetch('/api/data', { cache: 'no-cache' }); // 强制验证（触发协商缓存）

干预协商缓存：避免 304，确保拿新内容

即使强缓存失效，协商缓存仍可能返回 304。要彻底拿到新响应，需让服务器拒绝 304。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

请求头中明确告知不接受缓存验证

fetch('/data.json', {
  headers: {
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache',
    'If-Modified-Since': '0',
    'If-None-Match': ''
  }
});

后端配合：响应头设置 Cache-Control: no-cache, must-revalidate 或 no-store
（注意：这需服务端支持，JS 仅能发起带特定头的请求，不能替服务器设头）

清除 Service Worker 缓存（现代 PWA 场景）

如果网站用了 Service Worker，它管理的 Cache API 缓存是 JS 可操作的：

// 删除所有已注册的 Service Worker 并清空其缓存
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistrations().then(regs => {
    regs.forEach(reg => {
      reg.unregister();
      caches.delete(reg.active?.scriptURL || '');
      caches.delete(reg.waiting?.scriptURL || '');
      caches.delete(reg.installing?.scriptURL || '');
    });
  });
}

也可只清空指定缓存名：

caches.open('my-app-v2').then(cache => cache.delete('/api/config'));

清除客户端存储型缓存（补充项）

这些不是 HTTP 缓存，但常被误认为“浏览器缓存”：

localStorage.clear() / sessionStorage.clear()
indexedDB.deleteDatabase('mydb')
cookies：需设 expires=Thu, 01 Jan 1970 00:00:00 GMT 或 max-age=0

不推荐但偶见的“重载硬刷”方式

location.reload(true); // 已废弃，部分浏览器仍支持，效果类似 Ctrl+F5
// 实际更可靠的是：
location.href = location.href + '?t=' + Date.now();

⚠️ 注意：这不是真正清除历史缓存，只是刷新当前页并绕过缓存加载一次。

不复杂但容易忽略

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南