浏览器两个 tab 都是同域，如何在一个tab 向另一个 tab 发消息

1. 使用 localStorage 事件

当修改 localStorage 时，会触发 storage 事件，其他同源页面可以监听该事件实现通信。

// Tab A 发送消息
localStorage.setItem('message', JSON.stringify({ content: 'Hello Tab B!' }));

// Tab B 接收消息
window.addEventListener('storage', (e) => {
  if (e.key === 'message') {
    const message = JSON.parse(e.newValue);
    console.log('Received:', message);
  }
});

特点：

• 只能传递字符串，需手动序列化/反序列化。

• 当前 Tab 修改数据时不会触发自己的监听器，只有其他 Tab 会收到事件。

• 受同源策略限制，仅限同域页面。

2 通过 window.postMessage（需窗口引用） 

如果两个 Tab 存在引用关系（如通过 window.open 打开），可直接通过 postMessage 通信。

// Tab A 打开 Tab B 并发送消息
const newTab = window.open('https://same-domain.com/tabB');
newTab.postMessage('Hello Tab B!', 'https://same-domain.com');

// Tab B 接收消息
window.addEventListener('message', (e) => {
  if (e.origin === 'https://same-domain.com') {
    console.log('Received:', e.data);
  }
});

特点：

• 需要直接引用目标窗口对象（如通过 window.open 或 window.opener）。

• 适用于有明确父子关系的页面。