选项卡或窗口之间的通信

Question

选项卡或窗口之间的通信我在寻找一种在浏览器中(在同一域中，而不是在CORS)中如何在多个选项卡或窗口之间进行通信而不留下痕迹的方法。有几种解决办法：使用窗口对象后讯息曲奇饼局部存储第一种可能是最糟糕的解决方案-您需要从当前的窗口打开一个窗口，然后您只能在打开窗口的情况下才能进行通信。如果在任何窗口中重新加载页面，则很可能会丢失通信。第二种方法，使用PostMessage，可能支持跨源通信，但与第一种方法有相同的问题。您需要维护一个窗口对象。第三种方法是使用cookie将一些数据存储在浏览器中，这样看起来就像向同一域中的所有窗口发送消息一样，但问题是，在清理之前，您永远无法知道所有选项卡是否已经读取了“消息”。您必须实现某种超时才能定期读取cookie。此外，您还受到最大Cookie长度的限制，最大Cookie长度为4KB。第四种解决方案，使用localStorage，似乎克服了cookie的局限性，甚至可以监听-使用事件。如何使用它是在被接受的答案中描述的。编辑2018：公认的答案仍然有效，但是对于现代浏览器来说，使用BroadCastChannel还有一个新的解决方案。有关一个简单的示例，请参见另一个答案，该示例描述了如何使用BroadCastChannel在制表符之间轻松地传输消息。

Answer 1

有一个现代化的API专门用于这个目的-广播频道

它就像：

var bc = new BroadcastChannel('test_channel');bc.postMessage('This is a test message.');
 /* send */bc.onmessage = function (ev) { console.log(ev); } /* receive */

消息不需要仅仅是DOMString，任何类型的对象都可以发送。

也许，除了API的清洁性之外，这也是这个API的主要好处-没有对象字符串化。

目前支撑仅在Chrome和Firefox中，但您可以找到使用localStorage的多填充。