如何在 JavaScript 或 html 中实现与 Google Chrome "Empty Cache and Hard Reload"相同的功能？

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

我希望

你没有将值保存在 db 中。 只需在myJson中保存所有更新值即可

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

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

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

在页面加载时检查本地存储是否有值，如果有值，则不向服务器发送请求只需从本地存储中读取即可像波纹管

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

Answer 2

如果可能的话

，您可以在要发出的任何文件或请求的末尾添加查询字符串。

如果您需要像 $.get('myapi/getfile'); 一样请求 URL，请尝试在以下位置添加当前日期/时间，然后像这样结束：

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

这将生成一个类似 myapi/getfile?cachebreaker=1553709710447 的 URL，浏览器将解释为新请求并且不使用缓存