更新本地存储后页面未刷新并向后导航 [英] Page not refreshed after localstorage update and navigate back
问题描述
在以下示例中，第一页从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>
请注意，我有一个meta标签来禁用缓存.我也尝试过其他禁用缓存的可能性，但它们都不起作用.以下是第二页的示例:
<!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>
我正在尝试给出一个答案，以澄清我试图通过注释进行解释的内容.
首先，您无法浏览浏览器的历史记录并刷新页面.通过JS，您无法通过某种标准方法访问所有浏览器的浏览器历史记录，仅使用浏览器提供的API，因此，您将无法使用任何以某种自定义方式利用历史记录的JS逻辑(并且该逻辑可在所有浏览器中使用，我认为您可以访问的唯一功能是 window.history ，但这仅模仿了后退/前进按钮的功能).
修改
此外:无法刷新历史记录中的页面".历史记录是特定于浏览器的功能，每种功能都有所不同，因为没有为此行为定义正式的规则(这也是为什么不缓存也不行的原因).因为页面信息不会持续存在(部分页面<在某些浏览器中无法保证此效果)，您可能无法仅使用JS/CSS或任何其他客户端方法(可能是cookie?)来处理此问题.
/编辑
如果我错了，请纠正我，但这是所需的流程:
用户输入页面(页面-a，页面-b，页面-c等)上的页面->使用页面上的链接，用户输入新页面，称为StorageUpdate.html->用户使用StorageUpdate.html上的界面来更新要反映在上一页上的数据(将用户发送到StorageUpdate.html的页面可以是a页，b页，c页，...页).
在StorageUpdate.html上更新数据后，要返回的页面不是 static 页面，而是必须是 dynamic (如果用户在StorageUpdate之前位于页面a中). html，然后返回到页面a(如果用户之前在页面b中，则返回页面b，...).
为此，我将建议以下内容:
以下是首页的摘要(可以是page-a，page-b或其他内容.下面的"thisPage.html"替换为链接所在页面的名称-可以动态放置使用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>
....
此外，历史记录中的所有页面都不需要不需要，因为只需让用户将自己重定向到其他页面，他们就会获得页面刷新"并拥有最新数据.
修改
您可以尝试完全改变流量！例如，ajax调用完全避免了历史问题"！使用异步请求来处理更新，然后刷新当前页面.为了使此功能在多个页面上生效，您必须合并页面/数据，以便可以集体刷新它们.
/编辑
如果这不是您要查找的内容，则可以在这可能是您最好的选择.定时循环将需要此处提供一些信息.我相信定时循环将是最好的选择，因为它将强制刷新页面，棘手的部分是确定何时强制执行.在同一链接中，您还将找到某种JS形式的检测前进/后退按钮按下事件的方法，变得越来越受支持的.
/编辑
In the following samples, the first page retrieves from localstorage then the second page sets localstorage. In Firefox and Safari (only) the value is not changed in the first page until I refresh the page. I do not need to do the explicit refresh in Edge, Chrome, Opera and IE. How can I get Firefox and Safari to process items updated in another page when a page is navigated back (returned) to?
Previous answers for similar problems say to disable the cache. I have tried to do that in many ways but it does not work for me. I tried the storage event and that does not work either, probably because the page is in history at the time. I can't find any event that occurs when the page is navigated back to. The focus event might work but it would likely be complicated and very vulnerable to problems.
Note that I want a solution that will work even if there are other pages of the web site in history. I want the pages in history to also refresh automatically when localstorage has been modified. So even a dialog or pop-up or whatever to modify localstorage would not work since it would not affect pages in the history.
The following is a sample of the first page:
<!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>
Note that I have a meta tag to disable the cache. I have tried other possibilities for disabling the cache too and none of them work. The following is a sample of the second page:
<!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>
I am attempting an answer to clarify what I was trying to explain through comments.
First, you cannot go though browser history and refresh the pages. Through JS you cannot access browser history for all browsers through some standard method, only with APIs provided by the browser, so therefore you cannot have any JS logic that will utilize the history in some custom way (and that will work across all browsers, the only functionality I can think of that you have access to is window.history, but that only mimics the back/forward button functionality).
Edit
In addition: It is not possible to "refresh pages in history". History is browser-specific functionality that is different for each because official rules are not well-defined for this behavior (this is also why not caching is also a no-go). Because page information does not persist (some of the page may in some browsers this is not guaranteed in others), you likely cannot handle this with only JS/CSS or any other client-side method (maybe cookies?).
/Edit
Correct me if I am wrong, but this is the desired flow:
User enters a page (page-a,page-b,page-c, ...) the page has data on it -> using a link from the page the user enters a new page called StorageUpdate.html -> the user uses an interface on StorageUpdate.html that updates data that you want reflected on the previous page (the page that sent the user to StorageUpdate.html, could be page-a, page-b, page-c, ...).
After updating data on StorageUpdate.html the page to return to is not a static page but needs to be dynamic (if user was in page-a before StorageUpdate.html then return to page-a, if user was in page-b before then return to page-b, ...).
For this I would recommend the following:
The following is a snippet of the first page (could be page-a, page-b, or whatever. Replace "thisPage.html" below with the name of the page the link is on -- this could be dynamically placed using JS and window.location if desired):
...
<p>
<a href="StorageUpdate.html?pageToReturnTo=thisPage.html">Update</a>
</p>
...
Then the following is a snippet for 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>
....
Also, this does not need to be done for all pages in history because by simply having the user redirect themselves to other pages they will get a "page refresh" and have the most recent data.
Edit
You may try a change in flow altogether! For example ajax calls that avoid the "history issue" completely! Use async requests to handle update then refresh the current page. For this to be taken into effect across multiple pages, you would have to combine the pages/data such that they can be refreshed collectively.
/Edit
In case this is not what you are looking for you can force a page refresh on any page with window.location = window.location in a timing loop. Again you would want some exterior variable (could be a get variable because it would persist across page refreshes) that prevents the refresh when you don't want it to happen.
Edit
Finally, this is likely your best bet. A timed loop would require some information provided here. I believe a timed loop would be your best bet as it would force a page refresh, the tricky part is determining when to force it. In the same link you will also find some JS form of detecting forward/back button press events that is becoming more supported.
/Edit
这篇关于更新本地存储后页面未刷新并向后导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
