有没有一种方法可以从浏览器缓存中添加/删除条目？

Question

场景：

1. 用户搜索以单词test开头的所有标签。
2. 服务器返回["test1", "test2", "test3"]，其中包含Cache-Control: max-age=86400（1天或其他适当的较大值）。
3. 用户添加一个新标签：test4。
4. 用户从第1步开始重复搜索。浏览器从第2步返回缓存的值。

是否可以在步骤3中更新浏览器缓存以执行以下任一操作？

• 更新缓存的响应以包含test4，或
• 立即使第1步中的缓存无效。

是否存在某种Javascript API，可以与浏览器缓存进行交互？我正在对所有请求使用Fetch API。

Answer 1

另一种解决方案是使用服务工作者来拦截所有这些请求并即时重写响应。这可能可以通过https://stackoverflow.com/a/42846899/72478和https://developer.mozilla.org/en-US/docs/Web/API/Headers/delete

来完成

您将始终从服务器响应中删除缓存头，因此浏览器永远不会将它们缓存在常规页面缓存（您没有完全控制）中，而是将其缓存在服务工作者“缓存存储”中。然后，服务人员将完全控制返回给客户端的响应。

Answer 2

一种解决方案是在步骤4发出XHR请求，并添加一个参数，使该请求对浏览器唯一（新）。例如?whatever。

如果唯一影响服务器状态的是单个用户，则JavaScript可以跟踪它们何时影响状态，以便开始使用新的“缓存无效化”参数。

另一方面，如果任何人都可以更新服务器状态，那么唯一（简单）的解决方案是始终使用新参数来不断请求服务器状态。为此使用当前时间戳（例如?1568952442135）通常效果很好。

这当然不能完全满足您的要求，但是可以解决客户端上过时的数据的问题。