CODEWITHSUNDEEP
javascripthtmlinternet-explorerlocal-storageinternet-explorer-11
developer
developer

Reputation: 319

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)

Upvotes: 15

Views: 5018

Answers (4)

Duc Nguyen
Duc Nguyen

Reputation: 588

my solution - angular app:

 @HostListener('window:storage', ['$event'])

 testWindowStorage(event: StorageEvent) {

     if (event.key === 'xxx' && event.newValue !== event.oldValue 
         && event.newValue !== event.oldValue)) {

      //do your business
     }
 }

Upvotes: 0

Christopher Brown
Christopher Brown

Reputation: 166

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!

Upvotes: 13

KevD
KevD

Reputation: 717

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: Two IE11 browser instances sharing localStorage

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.

Upvotes: 8

muttonUp
muttonUp

Reputation: 6717

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. enter image description here

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. enter image description here

  • Microsoft Edge on Windows 10 (10162), has the same problem. enter image description here The fact that IE11 shows 'correct' behaviour on windows 7, suggests the OS is where the problem lies?

Upvotes: 5

Related Questions