《前端跨页面通信方案》

1.1 LocalStorage 方案

// page1.js
window.localStorage.setItem('message', JSON.stringify({
    type: 'update',
    data: { content: 'Hello' },
    timestamp: Date.now()
}));

// page2.js
window.addEventListener('storage', event => {
    if (event.key === 'message') {
        const data = JSON.parse(event.newValue);
        console.log('Received:', data);
    }
});

1.2 BroadcastChannel API

// 创建通道
const channel = new BroadcastChannel('app_channel');

// 发送消息的页面
channel.postMessage({
    type: 'UPDATE_DATA',
    payload: { id: 1, value: 'new data' }
});

// 接收消息的页面
channel.addEventListener('message', event => {
    const { type, payload } = event.data;
    switch(type) {
        case 'UPDATE_DATA':
            handleDataUpdate(payload);
            break;
        // ... 其他类型处理
    }
});

1.3 SharedWorker 方案

// shared-worker.js
const connections = new Set();

self.onconnect = event => {
    const port = event.ports[0];
    connections.add(port);
    
    port.onmessage = event => {
        // 广播消息给所有连接
        connections.forEach(p => {
            if (p !== port) {
                p.postMessage(event.data);
            }
        });
    };
};

// 页面中使用
const worker = new SharedWorker('shared-worker.js');
worker.port.start();

// 发送消息
worker.port.postMessage({ type: 'UPDATE', data: 'some data' });

// 接收消息
worker.port.onmessage = event => {
    console.log('Received:', event.data);
};