如何刷新HTTP请求缓存？客户端侧缓存刷新方法咨询

对应需求1：刷新页面时同步清除页面资源与所有请求缓存 #

有两种纯客户端可落地的方法，不需要服务端配合：

• 直接调用标准API location.reload(true)：传入的布尔参数会强制浏览器绕过所有本地HTTP缓存，重新拉取当前页面依赖的所有静态资源、接口请求资源，效果和手动按硬刷新快捷键（Mac端Cmd+Shift+R/Windows端Ctrl+F5）完全一致，所有主流桌面、移动端浏览器均支持该参数。
• 手动清理缓存后重载：如果需要更精细的缓存控制，可以在重载前调用CacheStorage API全量清理站点下的缓存内容：

  // 清除所有站点关联的缓存
  const cacheKeys = await caches.keys()
  await Promise.all(cacheKeys.map(key => caches.delete(key)))
  // 清理完成后执行页面重载
  location.reload()
  

  该方法只会清除HTTP缓存、Service Worker托管的缓存，不会影响localStorage、IndexedDB等其他本地存储的数据。

对应需求2：AJAX请求拉取新数据后覆盖原有路径缓存 #

不需要给请求追加时间戳类的冗余参数，通过CacheStorage可以直接实现缓存覆写：

• 发起请求时保持原始请求路径不变（比如/api/names?id=<id>），请求配置设置为跳过缓存拉取最新数据。
• 拿到最新响应后，直接将原始请求作为键、新响应作为值存入对应缓存桶，会自动覆盖该路径下的旧缓存内容，后续同路径的缓存请求就会直接读取到最新数据。
• 参考实现代码：

  // 构造原始请求，不要追加_时间戳参数
  const apiRequest = new Request('/api/names?id=123')
  // 跳过缓存拉取最新数据
  const freshRes = await fetch(apiRequest, { cache: 'reload' })
  // 写入缓存覆盖旧内容
  const apiCache = await caches.open('site-api-cache')
  // 响应对象是流，需要clone后再存入缓存
  await apiCache.put(apiRequest, freshRes.clone())
  
  // 后续同路径的请求如果走cache: default配置，会直接读取刚更新的缓存
  

如果项目使用XMLHttpRequest发送请求，只需要将XHR返回的响应内容、响应头包装为标准Response实例，再调用同样的cache.put方法即可完成缓存覆盖。

效果说明 #

以上方案均不需要修改服务端的Expires、Cache-Control等响应头配置，日常访问时可以正常走缓存获得加载速度提升，需要更新数据时手动触发刷新/缓存覆写逻辑即可，完全匹配预期使用目标。

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