前端跨页面通信方法

问题

在前端开发中，如何实现不同页面之间的数据传递和通信？

解答

1. LocalStorage / SessionStorage

通过 Web 存储 API 在同源页面间共享数据，可监听 storage 事件实现实时更新。

// 页面 A：写入数据
localStorage.setItem('message', 'Hello from Page A');

// 页面 B：监听变化
window.addEventListener('storage', (e) => {
  if (e.key === 'message') {
    console.log('收到消息:', e.newValue);
  }
});

2. Cookies

在同一域名下的页面间传递数据。

// 设置 Cookie
document.cookie = 'user=John; path=/';

// 读取 Cookie
const cookies = document.cookie.split('; ');
const userCookie = cookies.find(row => row.startsWith('user='));

3. PostMessage

通过 window.postMessage() 在不同窗口间发送消息，支持跨域通信。

// 发送方
const targetWindow = window.open('https://example.com');
targetWindow.postMessage({ type: 'greeting', data: 'Hello' }, 'https://example.com');

// 接收方
window.addEventListener('message', (event) => {
  if (event.origin === 'https://trusted-origin.com') {
    console.log('收到消息:', event.data);
  }
});

4. Broadcast Channel

在同一浏览器的不同上下文间进行双向通信，采用发布-订阅模式。

// 页面 A
const channel = new BroadcastChannel('my_channel');
channel.postMessage('Hello from Page A');

// 页面 B
const channel = new BroadcastChannel('my_channel');
channel.onmessage = (event) => {
  console.log('收到消息:', event.data);
};

5. SharedWorker

多个页面共享的 Web Worker，可实现双向通信和数据共享。

// 创建 SharedWorker
const worker = new SharedWorker('worker.js');

// 发送消息
worker.port.postMessage('Hello');

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

6. IndexedDB

客户端数据库，可在不同页面间存储和共享结构化数据。

// 打开数据库
const request = indexedDB.open('MyDatabase', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  // 进行读写操作
};

7. WebSockets

通过服务器中转实现实时双向通信，适合需要服务端协调的场景。

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

socket.onmessage = (event) => {
  console.log('收到消息:', event.data);
};

socket.send('Hello Server');

关键点

• LocalStorage 适合同源页面间的简单数据共享，需注意 storage 事件仅在其他页面触发
• PostMessage 支持跨域通信，但需严格验证 origin 确保安全性
• Broadcast Channel 是同源页面通信的最佳选择，API 简洁且专为此场景设计
• SharedWorker 适合需要共享计算逻辑的场景，但兼容性较差
• WebSockets 需要服务端支持，适合需要实时推送或多页面协调的复杂场景