时间戳

首页 > 解决方案 > 来自本地存储的同步消息在 IE11 中丢失

javascript - 来自本地存储的同步消息在 IE11 中丢失

问题描述

我有一个要求，需要在跨域选项卡之间共享来自 websocket 的消息。所以我在每个选项卡中设置了一个 iframe 来监听 localstorage 事件。当主选项卡接收到 websocket 消息时，将消息设置到 localstorage 中，然后其他选项卡或称为从选项卡将获取 localstorage 事件在页面中进行一些反应。它在 chrome 中运行良好，但我在 Edge 和 IE11 中遇到了问题。出于某种原因，我希望保存所有的消息，所以这些消息的键就像'__message_[random UUID]'。在 edge 和 IE11 中，slave 选项卡可以获取事件和消息键，但消息值通常为空。

这是 iframe 中的代码。

    window.addEventListener("message", function(e){
        }
        if(e.data.type === 'ws-message') {
            var messageId_ = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random() * 16 | 0,
                v = c === 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
            localstorage.setItem('__message_'+messageId_ , JSON.stringify({topic: e.data.topic, message: e.data.message}));
        }
    })

并在哪里听事件：

    window.addEventListener("storage", function(e){
        if(e.key.indexOf('__message_') === 0 && e.newValue !== null && __node_id__ !== __master_tab__){
            window.parent.postMessage({type: 'ws-message', message: JSON.parse(localstorage.getItem(e.key))}, '*');
        }
    })

在这里我可以得到e.key，但localstorage.getItem(e.key)将是空的。起初我想会有一些延迟，但是当我在监听事件中设置超时时，没有任何改变。PS：Websocket消息接收密度较高，可能是这个原因？

标签： javascriptlocal-storagecross-domaininternet-explorer-11

解决方案

我只是找到一些线索。当我放弃每条消息的 uuid 时，这意味着所有消息共享相同的密钥__message_，并且每次收到新消息时，我都会更改值而不是将其保存为新值，然后它就可以正常工作。所以我猜是导致上述问题的大量消息。

推荐阅读