跨应用使用localStorage.setItem与getItem遇null问题求解

核心原因：浏览器 localStorage 的同源策略限制 #

浏览器的 localStorage 遵循同源策略，只有协议、域名、端口三者完全一致的页面，才能共享同一份 localStorage 数据。应用1和应用2如果不是同源的，自然读不到对方存储的数据。

具体解决方法 #

1. 确保两个应用同源 #

如果两个应用属于同一业务体系，可调整部署方式满足同源要求：

• 部署在同主域名的子域名下（如 app1.example.com 和 app2.example.com），在两个应用的页面加载时执行以下代码实现主域名共享：

  document.domain = 'example.com';
  

  注意：此方式仅适用于同主域名场景，且协议、端口必须一致。
• 让两个应用使用相同的协议、域名、端口，通过路径区分（如 example.com/app1 和 example.com/app2），这种情况下无需额外配置，可直接共享 localStorage。

2. 跨域场景下的解决方案 #

如果两个应用必须跨域，可通过以下方式实现数据共享：

方法一：postMessage 跨域通信

• 应用1存储数据后，监听应用2的消息请求并返回数据：

  // 应用1 代码
  let data = "This is Session";
  localStorage.setItem("myurl", data);
  
  window.addEventListener('message', (event) => {
    // 验证消息来源，避免恶意请求
    if (event.origin === 'https://应用2的完整域名') {
      if (event.data === 'requestMyUrlData') {
        event.source.postMessage(localStorage.getItem("myurl"), event.origin);
      }
    }
  });
  

• 应用2发送请求并接收返回的数据：

  // 应用2 代码
  window.parent.postMessage('requestMyUrlData', 'https://应用1的完整域名');
  
  window.addEventListener('message', (event) => {
    if (event.origin === 'https://应用1的完整域名') {
      const newdata = event.data;
      console.log(newdata); // 预期得到"This is Session"
    }
  });
  

方法二：服务器中转数据

• 应用1调用后端接口，将数据 This is Session 存储到服务器，关联用户标识（如token、cookie）。
• 应用2调用同一后端接口，通过用户标识获取对应数据。

方法三：Cookie 跨域共享（数据量≤4KB时适用）

• 应用1设置共享Cookie：

  // 应用1 代码
  document.cookie = "myurl=This is Session; domain=.example.com; path=/; secure; SameSite=None";
  

• 应用2读取Cookie：

  // 应用2 代码
  function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
  }
  const newdata = getCookie('myurl');
  

  注意：Cookie有大小限制，需合理配置 secure 和 SameSite 属性保障安全。

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