浏览器跨标签通讯

发表于   |   分类于   |     |   阅读次数

有这样一个场景，A访问了一个网站，登录后，打开第二个标签页并注销登录，那么第一个标签页应该先判断A是否注销，然后做相应改变。这就涉及到多标签页之间如何通讯
有以下几种方法：

  1. SharedWorker

  2. localstorage
    不论其中的哪一项在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件。实际上，这就意味着不论在哪个浏览器的标签页里访问了 localStorage，所有其它的标签页都能通过 window 对象监听到这个事件

    1
    2
    3
    window.addEventListener('storage', function (event) {
    console.log(event.key, event.newValue);
    });

    不论某个标签页在何时修改了 localStorage，都会对其余的所有标签触发事件。这就意味着我们只要为 localStorage 赋值，就能够跨浏览器标签通信了。
    不过，一些浏览器的仍然存在着 quirks，譬如无痕模式下的 Safari 在设置值时会抛出 QuotaExceededError 的异常，有某些浏览器不支持开箱即用的 JSON,可以使用bevacqua local-storage

  3. WebSocket
  4. cookies