前端跨页面通信方式介绍

在前端开发中，跨页面通信是一个常见的需求，尤其是在单页应用（SPA）或多页应用（MPA）中。以下是几种常见的跨页面通信方式：

1. LocalStorage / SessionStorage

• 原理: 利用 localStorage 或 sessionStorage 存储数据，并通过 storage 事件监听数据变化。
• 适用场景: 适用于同源页面之间的通信。
• 示例:

  // 页面A
  localStorage.setItem('message', 'Hello from Page A');
  
  // 页面B
  window.addEventListener('storage', (event) => {
      if (event.key === 'message') {
          console.log('Received message:', event.newValue);
      }
  });
  

2. BroadcastChannel API

• 原理: 使用 BroadcastChannel 创建一个频道，不同页面可以通过该频道进行消息广播。
• 适用场景: 适用于同源页面之间的通信。
• 示例:

  // 页面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('Received message:', event.data);
  };
  

3. SharedWorker

• 原理: 使用 SharedWorker 创建一个共享的 Web Worker，多个页面可以通过该 Worker 进行通信。
• 适用场景: 适用于同源页面之间的复杂通信场景。
• 示例:

  // SharedWorker 脚本 (shared-worker.js)
  self.onconnect = (event) => {
      const port = event.ports[0];
      port.onmessage = (e) => {
          console.log('Received message:', e.data);
          port.postMessage('Hello from SharedWorker');
      };
  };
  
  // 页面A
  const worker = new SharedWorker('shared-worker.js');
  worker.port.postMessage('Hello from Page A');
  worker.port.onmessage = (event) => {
      console.log('Received message:', event.data);
  };
  
  // 页面B
  const worker = new SharedWorker('shared-worker.js');
  worker.port.postMessage('Hello from Page B');
  worker.port.onmessage = (event) => {
      console.log('Received message:', event.data);
  };
  

4. PostMessage API

• 原理: 使用 window.postMessage 方法在不同窗口或 iframe 之间发送消息。
• 适用场景: 适用于跨域页面之间的通信。
• 示例:

  // 页面A
  const targetWindow = window.open('pageB.html');
  targetWindow.postMessage('Hello from Page A', '*');
  
  // 页面B
  window.addEventListener('message', (event) => {
      console.log('Received message:', event.data);
  });
  

5. Service Worker

• 原理: 使用 Service Worker 作为中间层，处理页面之间的消息传递。
• 适用场景: 适用于需要离线支持或后台同步的场景。
• 示例:

  // Service Worker 脚本 (service-worker.js)
  self.addEventListener('message', (event) => {
      console.log('Received message:', event.data);
      event.source.postMessage('Hello from Service Worker');
  });
  
  // 页面A
  navigator.serviceWorker.register('service-worker.js').then(() => {
      navigator.serviceWorker.controller.postMessage('Hello from Page A');
  });
  
  // 页面B
  navigator.serviceWorker.register('service-worker.js').then(() => {
      navigator.serviceWorker.controller.postMessage('Hello from Page B');
  });
  

6. IndexedDB

• 原理: 使用 IndexedDB 存储数据，并通过监听数据变化实现通信。
• 适用场景: 适用于需要存储大量结构化数据的场景。
• 示例:

  // 页面A
  const request = indexedDB.open('myDatabase', 1);
  request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction('messages', 'readwrite');
      const store = transaction.objectStore('messages');
      store.put({ id: 1, message: 'Hello from Page A' });
  };
  
  // 页面B
  const request = indexedDB.open('myDatabase', 1);
  request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction('messages', 'readonly');
      const store = transaction.objectStore('messages');
      const getRequest = store.get(1);
      getRequest.onsuccess = (event) => {
          console.log('Received message:', event.target.result.message);
      };
  };
  

7. URL Parameters / Query Strings

• 原理: 通过 URL 参数或查询字符串传递数据。
• 适用场景: 适用于简单的数据传递场景。
• 示例:

  // 页面A
  window.location.href = 'pageB.html?message=Hello from Page A';
  
  // 页面B
  const urlParams = new URLSearchParams(window.location.search);
  const message = urlParams.get('message');
  console.log('Received message:', message);
  

8. Server-Sent Events (SSE)

• 原理: 使用 Server-Sent Events 从服务器推送消息到客户端。
• 适用场景: 适用于需要服务器主动推送数据的场景。
• 示例:

  // 服务器端 (Node.js)
  const http = require('http');
  http.createServer((req, res) => {
      res.writeHead(200, {
          'Content-Type': 'text/event-stream',
          'Cache-Control': 'no-cache',
          'Connection': 'keep-alive'
      });
      setInterval(() => {
          res.write('data: Hello from Server\n\n');
      }, 5000);
  }).listen(3000);
  
  // 页面A
  const eventSource = new EventSource('http://localhost:3000');
  eventSource.onmessage = (event) => {
      console.log('Received message:', event.data);
  };
  

9. WebSocket

• 原理: 使用 WebSocket 实现全双工通信。
• 适用场景: 适用于需要实时双向通信的场景。
• 示例:

  // 服务器端 (Node.js with ws library)
  const WebSocket = require('ws');
  const wss = new WebSocket.Server({ port: 8080 });
  wss.on('connection', (ws) => {
      ws.on('message', (message) => {
          console.log('Received message:', message);
          ws.send('Hello from Server');
      });
  });
  
  // 页面A
  const ws = new WebSocket('ws://localhost:8080');
  ws.onmessage = (event) => {
      console.log('Received message:', event.data);
  };
  ws.send('Hello from Page A');
  
  // 页面B
  const ws = new WebSocket('ws://localhost:8080');
  ws.onmessage = (event) => {
      console.log('Received message:', event.data);
  };
  ws.send('Hello from Page B');
  

10. Custom Events

• 原理: 使用 CustomEvent 创建自定义事件，并通过 window.dispatchEvent 和 window.addEventListener 进行通信。
• 适用场景: 适用于同源页面之间的自定义事件通信。
• 示例:

  // 页面A
  const event = new CustomEvent('myEvent', { detail: 'Hello from Page A' });
  window.dispatchEvent(event);
  
  // 页面B
  window.addEventListener('myEvent', (event) => {
      console.log('Received message:', event.detail);
  });
  

总结

不同的跨页面通信方式适用于不同的场景，选择合适的通信方式可以提高应用的性能和用户体验。在实际开发中，通常会根据具体需求选择一种或多种通信方式组合使用。