多独立Vue.js SPA间数据共享可行吗？含不同端口场景

Great question! Let’s break down both scenarios clearly to answer whether data sharing is possible between Vue.js SPAs in each case.

Absolutely! Both scenarios you described do support data sharing between Vue.js SPAs—the approach just shifts slightly based on how the SPAs are hosted. Let’s dive into each case:

Scenario 1: Multiple Vue.js SPAs (general case) #

Whether these SPAs live on the same domain (e.g., your-app.com/dashboard and your-app.com/profile) or separate domains, you have reliable ways to share data:

• Browser Storage APIs: Use localStorage, sessionStorage, or IndexedDB for persistent or session-bound data. Any SPA running on the same origin can access this stored data directly. Example:

  // In SPA 1: Save user data
  localStorage.setItem('sharedUser', JSON.stringify({ id: 456, username: 'jane_doe' }));
  
  // In SPA 2: Retrieve the data
  const sharedUser = JSON.parse(localStorage.getItem('sharedUser'));
  

  Note: Cross-domain SPAs can’t directly access each other’s localStorage (browser security restriction), but we’ll cover workarounds for that in the next scenario.
• Shared Backend/API: All SPAs can connect to a common backend service. When one SPA updates data, it sends the change to the backend, and other SPAs can fetch the latest state via API calls. For real-time sync, use WebSockets to push updates instantly between SPAs.
• URL Query Parameters: For simple, one-time data transfer (like passing a temporary token), append data to the URL when navigating between SPAs. In Vue, you’d do something like:

  // In SPA 1: Navigate to SPA 2 with data
  this.$router.push({ path: '/app2', query: { tempToken: 'abc123' } });
  
  // In SPA 2: Retrieve the data
  const tempToken = this.$route.query.tempToken;
  

Scenario 2: Two Vue.js SPAs on ports 8080 and 8082 #

Since these run on different ports, browsers treat localhost:8080 and localhost:8082 as separate origins—so direct localStorage access isn’t allowed. But you still have solid options for data sharing:

• PostMessage API: This is the standard tool for cross-origin communication between windows/tabs. Here’s a quick implementation:

  // In SPA on 8080 (sender):
  const targetSpa = window.open('http://localhost:8082');
  targetSpa.postMessage(
    { type: 'ORDER_UPDATE', payload: { orderId: 789, status: 'shipped' } },
    'http://localhost:8082'
  );
  
  // In SPA on 8082 (receiver):
  window.addEventListener('message', (event) => {
    // Always validate the origin to avoid security risks
    if (event.origin === 'http://localhost:8080') {
      if (event.data.type === 'ORDER_UPDATE') {
        console.log('Received order update:', event.data.payload);
        // Use or store the data here
      }
    }
  });
  

• Shared Backend/API: Same as the first scenario—both SPAs can interact with a common backend. For real-time sync, WebSockets (like Socket.io) let the backend push updates to both SPAs whenever data changes.
• Cross-Origin Storage Middleman: If you need persistent storage across ports, set up a small shared iframe hosted on one of the origins. The iframe handles all storage operations, and both SPAs use postMessage to send requests to it (e.g., "save this data" or "fetch that data").

Key Takeaway #

No matter how your Vue SPAs are deployed—same origin or different ports like 8080 and 8082—data sharing is totally achievable. Pick the method that fits your use case:

• Use localStorage for same-origin persistent data
• Use postMessage for cross-origin real-time communication
• Use a shared backend for scalable, centralized data that needs to persist across sessions or devices

内容的提问来源于stack exchange，提问作者piyush singhal