localStorage in win8.1 IE11 does not synchronize

问题

We have two pages "/read" and "/write". Page "/write" each second updates localStorage with current time:

setInterval(function(){
    var time = (new Date()).getTime();
    localStorage.setItem("time", time);
    console.log("set", time);
},1000);

Page "/read" reads same storage:

setInterval(function(){
    var time = localStorage.getItem("time");
    console.log("get", time);
},1000);

One would think that "/read" page should show the same values which are written to localStorage by another page. But in IE11 on Win8.1 this is broken. Page "/read" reads some old value from storage, and further on it will show you the same value (as if it uses cache for local storage). Any ideas?

P.S. Both pages are on the same domain (live example - read write)

回答1:

I've found a workaround for this issue on Win 10. If you handle the window.onstorage event in your code then localStorage will refresh for all open tabs. Something as simple as this worked for me:

window.onstorage = function(e){
    //Leave this empty
    //or add code to handle
    //the event
};

I haven't tested this code thoroughly, so please do so before using this method in any production apps.

Hope this helps!

回答2:

It seems that the localStorage.GetItem method under IE11 / Windows 8 is unreliable and may retrieve previous values. But this can be worked around by calling the localStorage.SetItem method immediately before retrieving a value.

I managed to replicate the issue using muttonUp's code and then made the following change to get the two windows talking to each other:

<!DOCTYPE html>
<head>
    <title>LocalStorage Test</title>
</head>
<body>
<button onclick="setLocalStorageValue()">Set Time</button>

<script>
    setInterval(function () {
        window.localStorage.setItem("unused_key",null);
        console.log(window.localStorage.getItem("test_key"));
    }, 1000);

    function setLocalStorageValue () {
        console.log("Button clicked - setting time");
        window.localStorage.setItem("test_key", new Date().getTime());
    }
</script>
</body>
</html>

Here's the output:

This workaround is useful in my scenario as I'm only retrieving values from localStorage at infrequent intervals and only storing small amounts of data. Because of the possible performance overhead with the increased number of setItem method calls I'd likely think carefully before using this workaround where the traffic to and from localStorage is heavier.

回答3:

Not so much an Answer, but further investigation. Using the below page, this problem can be easily tested by hosting on a web server and opening it in different tabs. Then clicking the Button in one of the tabs.

<!DOCTYPE html>
<head>
    <title>LocalStorage Test</title>
</head>
<body>
<button onclick="setLocalStorageValue()">Set Time</button>

<script>
    setInterval(function () {
        console.log(window.localStorage.getItem("test_key"));
    }, 1000);

    function setLocalStorageValue () {
        window.localStorage.setItem("test_key", new Date().getTime());
    }
</script>
</body>
</html>

Results in Chrome/Firefox/Safari regardless of OS are predictable the same. They show that localStorage is shared across the pages from the same Origin.

On IE11 on windows 7, also gives the same results.

Acording to what I have read, this appears to be per the spec, point 3 here https://html.spec.whatwg.org/multipage/webstorage.html#the-localstorage-attribute

But...

IE 11 on windows 8.1, will demonstrate separate localStorage areas for the same origin.
Microsoft Edge on Windows 10 (10162), has the same problem.
The fact that IE11 shows 'correct' behaviour on windows 7, suggests the OS is where the problem lies?

来源：https://stackoverflow.com/questions/24077117/localstorage-in-win8-1-ie11-does-not-synchronize

标签

javascript

html5

internet-explorer

local-storage

internet-explorer-11