Page not refreshed after localstorage update and n

2019-07-24 19:20发布

站内问答 / JavaScript
1330 1 4

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>

1条回答
▲ chillily
2楼-- · 2019-07-24 19:57

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)