JavaScript标签或窗口之间的通讯

JavaScript标签或窗口之间的通讯

如果您仍然希望使用本地存储在选项卡之间进行通信，请按照以下方式进行 *** 作：**

为了在某​​个选项卡向其他选项卡发送消息时获得通知，您只需要在“存储”事件上进行绑定。在所有标签中，执行以下 *** 作：

$(window).on('storage', message_receive);

message_receive

每次在任何其他选项卡中设置localStorage的任何值时，都会调用该函数。事件侦听器还包含新设置为localStorage的数据，因此您甚至不需要解析localStorage对象本身。这非常方便，因为您可以在设置值后立即重置该值，以有效清除任何痕迹。这是消息传递功能：

// use local storage for messaging. Set message in local storage and clear it right away// This is a safe way how to communicate with other tabs while not leaving any traces//function message_broadcast(message){    localStorage.setItem('message',JSON.stringify(message));    localStorage.removeItem('message');}// receive message//function message_receive(ev){    if (ev.originalEvent.key!='message') return; // ignore other keys    var message=JSON.parse(ev.originalEvent.newValue);    if (!message) return; // ignore empty msg or msg reset    // here you act on messages.    // you can send objects like { 'command': 'doit', 'data': 'abcd' }    if (message.command == 'doit') alert(message.data);    // etc.}

因此，现在，一旦您的选项卡绑定了onstorage事件，并且您实现了这两个功能，就可以简单地向其他选项卡调用广播消息，例如：

message_broadcast({'command':'reset'})

请记住，两次发送完全相同的消息只会传播一次，因此，如果您需要重复发送消息，请向它们添加一些唯一的标识符，例如

message_broadcast({'command':'reset', 'uid': (new Date).getTime()+Math.random()})

还请记住，广播该消息的当前选项卡实际上并没有收到，只有同一域中的其他选项卡或窗口才收到。

您可能会问，如果用户在setItem（）调用之后，在removeItem（）之前加载了另一个网页或关闭了他的选项卡，将会发生什么情况。好吧，根据我自己的测试，浏览器将保持卸载状态，直到整个功能

message_broadcast()

完成。我测试过要放置很长的for（）周期，但在关闭之前它仍然等待周期结束。如果用户只是杀死它们之间的选项卡，则浏览器将没有足够的时间将消息保存到磁盘，因此在我看来，这种方法是一种安全的方法，它可以毫无痕迹地发送消息。欢迎发表评论。