前端跨页面通信方法
实现不同页面间数据传递和通信的多种方案
问题
在前端开发中，如何实现不同页面之间的数据传递和通信？
解答
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 需要服务端支持，适合需要实时推送或多页面协调的复杂场景
目录