前言
为了提高稳定性，浏览器的每个标签页都是一个独立的进程，一个标签页崩溃不会影响到其他标签页
下图是谷歌浏览器任务管理器截图，可以看到每个标签页对应一个进程ID
跨标签通信的场景
独立的标签页之间什么时候需要通信？
场景一：用户状态同步
在一个标签页中登录了网页，可以在其他打开的标签页中同步这个登录状态。
这时可以用localStorage（本地存储）或者sessionStorage（会话存储）存储登录数据，如token等
以下是两者的主要区别
生命周期
- localStorage：数据存储在用户的本地存储中，即使浏览器关闭后再次打开，数据依然存在，直到明确被删除或者达到浏览器规定的存储限制为止。 - sessionStorage：数据只存在于当前浏览器窗口（或标签页）的生命周期内。一旦窗口或标签页关闭，存储在其中的数据就会被销毁。
作用域
- localStorage：数据在同一个源（即相同的协议、域名和端口号）的所有页面间共享。同一个域名下的不同标签页可以共用localStorage - sessionStorage：数据仅在当前会话的同一窗口内共享。对于不同的标签页，即使是同一个网页，数据也不共用。
存储容量
- 两者通常具有相似的存储容量，现代浏览器中通常是5MB左右，实际容量可能因浏览器而异。
数据安全与隐私
- 两者都是前端存储，数据都不会自动发送给服务器，相比于每次HTTP请求都会随带的cookies，提高了部分隐私性和安全性。
数据持久性
- 对于希望长期保留的用户设置或应用程序状态，可以使用localStorage。 - 如果只是临时需要存储页面间交互产生的数据，且不需要跨窗口持久化，应使用sessionStorage。
两个同源的html存储的localStorage在一个域下，并且B.html关闭后，Bkey还在
一个标签页只有当前页面的sessionStorage数据
场景二：通知和消息传递
当用户在一个标签页收到新的消息或通知时，需要将这一状态或消息内容传递给所有打开的页面，以实现实时提醒功能。
可以采用BroadcastChannel， 创建一个同源策略下的通道，使得相同源的不同标签页之间能够进行一对多的广播式通信。
看看代码和效果
总结
知道了浏览器是多进程的，每个标签页是独立的进程
列举了两个常见标签通信场景和它对应的实现方法（当然还有window.postMessage()，WebSocket等等）