发表新帖
发表新帖

localStorage in win8.1 IE11 does not synchronize

前端 未结
关注
4 1205
佛祖请我去吃肉
佛祖请我去吃肉 2020-12-30 05:41

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

setInterval(function(){
    var time = (new
相关标签:
4条回答
  • 抹茶落季
    2020-12-30 06:12

    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?

    0 讨论(0)
  • 清酒与你
    2020-12-30 06:13

    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!

    0 讨论(0)
  • 独厮守ぢ
    2020-12-30 06:15

    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.

    0 讨论(0)
  • 挽巷
    2020-12-30 06:29

    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
     }
 }
    0 讨论(0)
 看不清?
提交回复
热议问题