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

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

如果您需要请求action = { "index": "loc3", "type": "tweet", "source": { 'text' : msg["text"], 'timestamp': msg["created_at"], 'location':[msg["loc_long"],msg["loc_lat"]], 'prediction': msg["prediction"] } }之类的网址，请尝试在当前网址处添加当前日期/时间，然后像这样结束：

action = {
            "index": "loc3",
            "type": "tweet",
            "source": {
                'text' : msg["text"],
                'timestamp': msg["created_at"],
                'location':{
                    "lon": msg["loc_long"],
                    "lat": msg["loc_lat"]
                    },
                'prediction': msg["prediction"]
                }
            }

会产生类似$.get('myapi/getfile');的URL，浏览器会将其解释为新请求，而不使用缓存

Answer 2

我希望您不要将值保存在db中。只需将所有更新值保存在 myJson

中

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

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

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

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

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

如何在JavaScript或html中实现与Google Chrome浏览器的“空缓存和硬重载”相同的功能？

2 个答案: