如何在JavaScript或HTML中实现Google Chrome的“空缓存和硬重载”功能？

Question

我正在创建一个显示JSON文件中文本的站点。 它还允许用户添加文本，删除文本和更新现有文本。 我设置它，以便当用户按下按钮（添加btn，删除btn，更新btn）时，更改将写入JSON文件并刷新页面。 当页面刷新时，它会读取JSON文件（我已经确认，是新版本），但它不显示新数据。

我已经深入检查了在重新加载页面之前修改了JSON文件。

if (request.readyState === 4 && request.status === 200) {
   let myJson = JSON.parse(request.responseText)
   /*do something*/
 }

此时：虽然JSON文件已被修改，但旧的文件仍在读取。 当我执行空缓存和硬重新加载时，将读取新的JSON文件。

我已经尝试过JavaScript：

location.reload(true)

在HTML中，以下各项的组合：

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

这些都没有奏效。

Answer 1

如果可能，您可以在任何文件或请求的末尾添加查询字符串。

如果你需要请求像$.get('myapi/getfile');这样的URL $.get('myapi/getfile'); ，尝试在此结束时添加当前日期/时间，如下所示：

$.get('myapi/getfile?cachebreaker=' + Date.now());

会产生像myapi/getfile?cachebreaker=1553709710447这样的URL myapi/getfile?cachebreaker=1553709710447哪些浏览器会将其解释为新请求而不使用缓存

Answer 2

我希望你没有保存db中的值。 只需在myJson中保存所有更新值

要解决您的问题，只需将数据保存到本地存储而不是变量

localStorage.setItem("myJson",JSON.parse(request.responseText)); 

如果每次添加，则更新删除修改本地存储，以便本地存储具有新的更新数据

在页面加载检查本地存储有价值如果有值不发送请求到服务器只是从本地存储如下读取它

var myJson= localStorage.getItem("myJson",JSON.parse(request.responseText));