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>
