浏览器多标签页通信

浏览器标签页之间是无法直接通信的，需要找到一个中介，如浏览器存储、同一个服务器或其他共享方案。

基于浏览器存储的方案

  • localStorage

  • cookie

  • indexDB

postMessage

发送窗口消息。

可以跨域。

所有主流浏览器（包括IE8）都支持。

安全问题（功能越强大，越容易出现安全问题）

广播频道（Broadcast Channel）

同源页面、窗口

跨项目实时通信——Broadcast Channel_橙程橙的博客-CSDN博客

Service Worker

运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求。

https://mp.weixin.qq.com/s/3Ep5pJULvP7WHJvVJNDV-g

Shared Worker

共享线程，在该线程中进行数据缓存，即可共享数据。

vue:sharedWorker共享工作者线程的使用 - 简书

websocket

需要与服务器建立连接，成本高。

参考

穿越标签页的通信魔法：揭秘跨标签页通信的神奇力量| 技术创作特训营第一期-腾讯云开发者社区-腾讯云