如何用JavaScript在Firefox重载页面时清除缓存？

1. 给URL添加随机查询参数（最通用） #

在需要强制刷新的函数里，给当前URL追加唯一随机参数（比如时间戳），让浏览器将其视为全新请求，绕过缓存重新加载：

function forceRefreshWithoutCache() {
  const currentUrl = window.location.href;
  // 移除已存在的随机参数，避免URL过长
  const cleanedUrl = currentUrl.split('?')[0];
  // 追加时间戳作为唯一标识
  window.location.href = `${cleanedUrl}?nocache=${Date.now()}`;
}

这个方法不依赖废弃API，仅通过URL唯一性触发浏览器重新请求，且只在调用该函数时生效，不会全局影响缓存策略。

2. 利用Cache API精准清除缓存（需知晓缓存资源） #

如果你清楚页面依赖的缓存资源URL，可以主动清除对应缓存后再重载，既避免全量缓存失效，又确保目标资源更新：

async function clearTargetCacheAndRefresh() {
  try {
    const cache = await caches.open('your-cache-name'); // 替换为实际缓存名称
    // 清除指定缓存资源，比如页面本身、关联脚本等
    await cache.delete(window.location.href);
    await cache.delete('/path/to/your/script.js');
    // 执行重载
    window.location.reload();
  } catch (err) {
    // 兼容不支持Cache API的浏览器，降级为追加参数的方式
    const cleanedUrl = window.location.href.split('?')[0];
    window.location.href = `${cleanedUrl}?nocache=${Date.now()}`;
  }
}

这种方式更高效，仅清除必要缓存资源，不会导致所有资源重新请求，但需要你了解应用的缓存配置。

3. 结合meta标签缓存控制（辅助全局配置） #

若前端需补充全局缓存约束，可在页面头部添加meta标签，确保页面本身不被长期缓存（此为全局设置，优先配合前两种方法使用）：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

内容的提问来源于stack exchange，提问作者Riji