Question

在以下示例中，第一页从localstorage中检索，然后第二页设置localstorage。在Firefox和Safari（仅限）中，在刷新页面之前，第一页中的值不会更改。我不需要在Edge，Chrome，Opera和IE中进行显式刷新。当页面被导航（返回）到？时，如何让Firefox和Safari处理在另一页面中更新的项目？

类似问题的先前答案表示禁用缓存。我试图在很多方面做到这一点，但它对我不起作用。我尝试了存储事件，这也不起作用，可能是因为当时页面在历史记录中。我无法找到页面导航回来时发生的任何事件。焦点事件可能会起作用，但可能会很复杂并且很容易受到问题的影响。

请注意，即使历史记录中有其他网页，我也希望有一个可行的解决方案。我希望历史记录中的页面在修改localstorage时自动刷新。因此，即使是对话框或弹出窗口或修改localstorage的任何内容都不会起作用，因为它不会影响历史记录中的页面。

以下是第一页的示例：

somecommand

请注意，我有一个元标记来禁用缓存。我已经尝试了其他可能性来禁用缓存，但它们都没有工作。以下是第二页的示例：

<!DOCTYPE html>
<html>

    <head>
        <meta content="en-us" http-equiv="Content-Language" />
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <meta http-equiv="Cache-Control" content="no-store, must-revalidate" />
        <title>Update Browser</title>
        <script type="application/ecmascript">
            function Show() {
                var Stored = localStorage.getItem("StorageUpdateTest");
                var d = new Date(Stored);
                output.innerHTML = d.toLocaleTimeString();
            }
            window.addEventListener("storage", Show, false);
        </script>
    </head>

    <body onload="Show();">

    <h1>Browser</h1>

    <form method="post">
        <p id="output"></p>
    </form>

    <p><a href="StorageUpdate.html">Update</a></p>

    </body>

</html>

Answer 1

我正在尝试回答澄清我试图通过评论解释的内容。

首先，您无法浏览浏览器历史记录并刷新页面。通过JS，cannot通过某种标准方法访问所有浏览器的浏览器历史记录，只使用浏览器提供的API，因此您不能拥有任何以某种自定义方式利用历史记录的JS逻辑（并且可以使用所有浏览器，我能想到的唯一可以访问的功能是window.history，但这只能模仿后退/前进按钮的功能。）

修改

此外：无法在历史记录中刷新页面＆＃34;。历史记录是特定于浏览器的功能，每个功能都不同，因为官方规则没有明确定义此行为（这也是为什么缓存也不禁止）。由于页面信息does not persist（ }，因此您可能无法仅使用JS / CSS或任何其他客户端方法（可能是cookie？）。

<强> /修改

如果我错了，请纠正我，但这是理想的流程：

用户输入页面（page-a，page-b，page-c，...）页面上有数据 - ＆gt;使用页面中的链接，用户输入名为StorageUpdate.html的新页面 - ＆gt;用户使用StorageUpdate.html上的接口来更新您希望在上一页上反映的数据（将用户发送到StorageUpdate.html的页面，可以是page-a，page-b，page-c，...）

在更新StorageUpdate.html上的数据后，要返回的页面不是静态页面，但需要动态（如果用户在StorageUpdate之前位于page-a中）。 html然后返回页面-a，如果用户在页面b之前然后返回到页面-b，...）。

为此，我建议如下：

以下是第一页的摘要（可以是page-a，page-b或其他。替换＆＃34; thisPage.html＆＃34;下面是链接所在页面的名称 - 这可以使用JS和window.location动态放置，如果需要）：

...
    <p>
         <a href="StorageUpdate.html?pageToReturnTo=thisPage.html">Update</a>
    </p>
...

然后以下是StorageUpdate.html的代码段：

...
<script type="application/ecmascript">
    function Update() {
        var d = new Date(Date.now());
        localStorage.setItem("StorageUpdateTest", d);
        output.innerHTML = d.toLocaleTimeString();
        //here is the redirection after update logic takes place (could be in a function)
        var query = window.location.search.substring(1);//only get query vars from url
        var vars = query.split("&");//in case there are multiple params
        var pageToReturnTo = vars[0];//we only want the url param "pageToReturnTo" from above
        window.location = pageToReturnTo;//send user "back" dynamically
    }
</script>
....

此外，这需要为历史记录中的所有页面执行不，因为只需让用户将自己重定向到其他页面，他们就会得到一个＆＃34;页面刷新＆＃34;并获得最新数据。

修改

您可以尝试完全改变流程！例如ajax调用，以避免＆＃34;历史问题＆＃34;彻底！使用异步请求来处理更新，然后刷新当前页面。为了在多个页面中实现这一点，您必须组合页面/数据，以便可以集体刷新它们。

<强> /修改

如果这不是您要查找的内容，则可以在timing loop中window.location = window.location的任何页面上强制刷新页面。再次，您可能需要一些外部变量（可能是get变量，因为它会在页面刷新时保持不变）在您不希望发生时阻止刷新。

修改

最后，this可能是您最好的选择。定时循环需要在此提供一些信息。我相信一个定时循环将是你最好的选择，因为它会强制页面刷新，棘手的部分是确定何时强制它。在同一个链接中，您还会发现一些JS形式的检测前/后按钮按下事件变得更加supported。

<强> /修改

在localstorage更新并导航回来之后，页面不会刷新

1 个答案: