同源策略中，页面间如何通信？

1. Broadcast Channel

Broadcast Channel API是Web APIs的一部分，允许开发者创建一个频道，通过这个频道，同一个浏览器上下文中打开的不同文档可以互相发送字符串消息。这使得在不同的浏览器tab、窗口或者web worker之间共享数据变得简单而高效，特别适合于实时同步状态、通知更新或协调用户界面的行为。

关键特性

• 同源策略：Broadcast Channel遵循同源安全策略，这意味着只能在具有相同协议、域名和端口的上下文中进行通信。
• 轻量级：与WebSocket相比，Broadcast Channel不需要与服务器建立连接，减少了网络开销和延迟。
• 简单易用：API设计直观，只需几行代码即可实现跨文档的消息传递。
• 支持多种上下文：不仅限于窗口间的通信，还支持iframe、worker等Web Worker上下文间的消息传递。

如何使用

创建和监听频道

首先，需要创建一个BroadcastChannel实例，并为其指定一个唯一的频道名称：

const channel
 = new BroadcastChannel('music-channel');

然后根据需求发送消息（数据）：

channel.postMessage({name:'葫芦娃'})

在一个页面中监听这个频道上的消息：

const channel = new BroadcastChannel('music-channel');

channel.addEventListener('message', (e) => {
    console.log(e.data, '监听到的数据');
})

当不再需要使用某个频道时，关闭它是良好的实践，以释放系统资源：

channel.close();

应用场景

• 实时数据同步：在多标签页应用中同步用户设置、购物车信息等。
• 通知系统：一个tab的操作可以即时通知其他tab显示消息或更新状态。
• 性能优化：替代频繁的localStorage读写操作，减少不必要的资源消耗。

2. LocalStorage

localStorage是一种客户端存储技术，它允许网页在用户的浏览器上保存数据，而且这些数据即使在浏览器关闭后仍能持久存在，直到用户明确清除或网站自身删除为止。与之相对的是sessionStorage，后者仅在当前会话期间有效，即标签页或窗口关闭后数据就会丢失。

特点与限制

• 容量限制：虽然规范没有明确规定具体大小，但大多数现代浏览器对每个站点的localStorage容量限制在5MB左右。
• 数据格式：localStorage只能存储字符串类型的数据。如果要存储对象，需要先将其转换为字符串（如使用JSON.stringify()）。
• 同源策略：遵循同源策略，即只能访问与当前网页同源的数据。

使用LocalStorage

存储数据

localStorage.setItem('musicName', '葫芦娃');

读取数据

const value = localStorage.getItem('musicName');

删除数据

localStorage.removeItem('musicName');
// 或清空所有数据
localStorage.clear();

StorageEvent：监听存储变化

当在同一个源下，一个页面通过localStorage修改了数据，所有打开的同源页面都会触发一个名为storage的事件。这就是StorageEvent，它提供了一种无需刷新页面就能感知到数据变化并作出相应处理的方式。

监听StorageEvent

window.addEventListener('storage', function(event) {
  console.log('Key:', event.key); // 变更的键名
  console.log('Old value:', event.oldValue); // 变更前的值
  console.log('New value:', event.newValue); // 变更后的值
  console.log('URL of origin:', event.url); // 触发存储事件的页面地址
});

应用场景

• 实时数据同步：在多标签页应用中，一个标签页更改了localStorage数据，其他标签页通过监听StorageEvent实现实时数据更新，无需手动刷新。
• 状态同步：比如用户登录状态、主题偏好设置等，可以在整个站点范围内即时生效。
• 简单的跨页面通信：虽然不如Broadcast Channel灵活，但对于简单场景足够使用。