【发布时间】：2017-08-13 18:48:30
【问题描述】：
在以下示例中，第一个页面从 localstorage 中检索，然后第二个页面设置 localstorage。在 Firefox 和 Safari（仅限）中，在我刷新页面之前，第一页中的值不会更改。我不需要在 Edge、Chrome、Opera 和 IE 中进行显式刷新。当页面被导航回（返回）到时，如何让 Firefox 和 Safari 处理在另一个页面中更新的项目？
类似问题的先前答案说禁用缓存。我试图以多种方式做到这一点，但它对我不起作用。我尝试了存储事件，但这也不起作用，可能是因为该页面当时在历史记录中。我找不到页面导航回时发生的任何事件。焦点事件可能会起作用，但它可能会很复杂并且很容易出现问题。
请注意，我想要一个解决方案，即使该网站的历史记录中有其他页面也能正常工作。我希望历史记录中的页面在修改本地存储时也自动刷新。因此，即使是对话框或弹出窗口或任何修改本地存储的内容都不起作用，因为它不会影响历史记录中的页面。
以下是第一页的示例：
<!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>
请注意，我有一个元标记来禁用缓存。我也尝试过其他禁用缓存的可能性，但它们都不起作用。以下是第二页的样例：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Storage Update</title>
<script type="application/ecmascript">
function Update() {
var d = new Date(Date.now());
localStorage.setItem("StorageUpdateTest", d);
output.innerHTML = d.toLocaleTimeString();
}
</script>
</head>
<body>
<h1>Storage Update</h1>
<form method="post">
<p id="output"></p>
<input name="ButtonUpdate" type="button" value="Update" onclick="Update();">
</form>
</body>
</html>
【问题讨论】：
-
您是否必须依赖用户能够通过点击浏览器中的“返回”按钮来访问 localStorage？如果您改为进行重定向，它将在每个浏览器中都有效。如果我没记错的话，Firefox 会使用后退按钮自动缓存要访问的页面，而 Chrome 和 IE 则不会。在这方面你可能需要
META REFRESH。 -
要添加到黑曜石时代，如果明确使用后退按钮对于逻辑来说不是必需，在函数末尾第二页的 Update() 中，您可以使用 @987654326 @.
-
@ObsidianAge，这是我希望许多其他人可以使用的东西，所以我想让它尽可能简单。我尝试了许多元标记的可能性，但没有找到任何可行的方法。
-
您尝试过this answer 中建议的元标记吗？还有一些关于防止缓存in this answer 的惊人文档（带有示例）：)
-
@Isaiah，这是一个示例，但在实际使用中，第一页可以是网站中的任何页面。
标签： javascript html local-storage