Question

我有一个需要在跨域标签之间共享来自websocket的消息的要求。因此，我在每个标签中都设置了一个iframe来监听本地存储事件。当主选项卡收到Websocket消息时，将消息设置为localstorage，然后其他选项卡或称为“从属”选项卡将获取localstorage事件，以在页面中进行一些响应。它在chrome中效果很好，但是在Edge和IE11中遇到了问题。由于某种原因，我希望保存所有消息，因此这些消息的密钥类似于“ __message_ [random UUID]”。在Edge和IE11中，从属选项卡可以获取事件和消息密钥，但是消息值通常为null。

这是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消息接收密度更高，也许这是原因吗？

Answer 1

我只是找到一些线索。当我为每条消息放弃uuid时，这意味着所有消息共享相同的密钥__message_，并且每次收到新消息时，我都会更改该值，而不是将其另存为新消息，那么它会很好地工作。所以我想是大量邮件导致了上述问题。

IE11中丢失了来自本地存储的同步消息

1 个答案: