多个标签页通信

下面分别使用LocalStorage、Broadcast Channel API和WebSocket来展示如何在浏览器内多个标签页之间进行通信的代码实现：

1. 使用LocalStorage实现多个标签页通信：

在第一个标签页中写入数据：

localStorage.setItem('message', 'Hello from Tab 1');

在第二个标签页中读取数据：

window.addEventListener('storage', function(event) {
    if (event.key === 'message') {
        console.log('Message received in Tab 2:', event.newValue);
    }
});

2. 使用Broadcast Channel API实现多个标签页通信：

创建一个新的Broadcast Channel：

const channel = new BroadcastChannel('tabCommunication');

在第一个标签页发送消息：

channel.postMessage('Hello from Tab 1');

在第二个标签页接收消息：

const channel = new BroadcastChannel('tabCommunication');
channel.onmessage = function(event) {
    console.log('Message received in Tab 2:', event.data);
};

3. 使用WebSocket实现多个标签页通信：

在每个标签页中建立WebSocket连接：

const socket = new WebSocket('ws://localhost:3000');

socket.onmessage = function(event) {
    console.log('Message received:', event.data);
};

// 发送消息
socket.send('Hello from Tab 1');

通过这些代码示例，你可以使用LocalStorage、Broadcast Channel API和WebSocket来在浏览器内的多个标签页之间进行通信。请根据具体需求选择适合的方式来实现标签页之间的通信。