Question

我们有两页“/ read”和“/ write”。页面“/ write”每秒用当前时间更新localStorage：

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

页面“/ read”读取相同的存储空间：

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

有人会认为“/ read”页面应该显示由另一个页面写入localStorage的相同值。但是在Win8.1的IE11中，这已经破了。页面“/ read”从存储中读取一些旧值，并在其上显示相同的值（就像它使用缓存进行本地存储一样）。有什么想法吗？

P.S。这两个页面都位于同一个域中（实例 - read write）

Answer 1

似乎IE11 / Windows 8下的localStorage.GetItem方法不可靠，可能会检索以前的值。但是这可以通过在检索值之前立即调用localStorage.SetItem方法来解决。

我设法使用muttonUp的代码复制问题，然后进行以下更改以使两个窗口相互通信：

<!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>

这是输出：

这种解决方法在我的场景中很有用，因为我只是偶尔从localStorage中检索值并且只存储少量数据。由于setItem方法调用数量增加可能带来性能开销，因此在使用此方法之前我可能会仔细考虑，其中进出localStorage的流量较大。

Answer 2

我在Win 10上找到了解决此问题的方法。如果您在代码中处理window.onstorage事件，则localStorage将刷新所有打开的选项卡。这件事对我来说很简单：

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

我没有彻底测试过这段代码，所以请在任何制作应用中使用此方法之前这样做。

希望这有帮助！

Answer 3

不是答案，而是进一步调查。使用下面的页面，可以通过在Web服务器上托管并在不同的选项卡中打开它来轻松测试此问题。然后点击标签一个中的按钮。

<!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>

无论操作系统如何，Chrome / Firefox / Safari中的结果都可以预测相同。它们表明localStorage是在同一个Origin的页面之间共享的。

在Windows 7上的IE11上，也给出了相同的结果。 enter image description here

根据我所读到的内容，这似乎符合规范，第3点https://html.spec.whatwg.org/multipage/webstorage.html#the-localstorage-attribute

<强>可是...

Windows 8.1上的IE 11将演示相同来源的单独localStorage区域。
Windows 10（10162）上的Microsoft Edge存在同样的问题。 IE11在Windows 7上显示“正确”行为这一事实表明操作系统存在问题所在？

Answer 4

我的解决方案-角度应用程序：

def main(string):
    arr = []
    while string.count(', ') > 0:
        index = string.index(', ')
        arr.append(int(string[0:index]))
        string = string[index + 2:len(string)]
    arr.append(int(string))
    return arr
print(main('1, 2, -3, 7592'))

win8.1中的localStorage IE11不同步

4 个答案: