如何让父域名访问子域名的LocalStorage存储内容

LocalStorage 受浏览器同源策略约束，只有协议、域名、端口完全一致的页面才能共享存储数据，父子域名不属于同源范围，因此默认无法直接互相读取LocalStorage。

你可以根据业务场景选择以下两种实现方案：

方案1：iframe + postMessage 通信（无侵入现有子域存储逻辑） #

该方案不需要修改子域现有存LocalStorage的逻辑，通过隐藏嵌入子域页面的方式跨域通信获取数据，适配性最强。

步骤1：在子域项目新增桥接页面 #

在子域 https://app.awesomedomain.com 新增一个空白静态页面 /local-storage-bridge.html，用于接收父域请求、读取子域LocalStorage并返回数据：

<!DOCTYPE html>
<html>
<body>
<script>
window.addEventListener('message', (event) => {
  // 仅允许合法来源请求，避免安全风险
  const allowedOrigins = ['https://awesomedomain.com', 'https://app.awesomedomain.com'];
  if (!allowedOrigins.includes(event.origin)) return;

  // 约定请求结构：{type: 'getLocalStorage', key: '存储键名'}
  if (event.data.type === 'getLocalStorage') {
    const storageValue = window.localStorage.getItem(event.data.key);
    // 返回数据给父域
    event.source.postMessage({
      type: 'localStorageResponse',
      key: event.data.key,
      value: storageValue
    }, event.origin);
  }
}, false);
</script>
</body>
</html>

如果子域是纯React单页应用，也可以新增一个专门的路由页实现上述逻辑。

步骤2：在父域React项目中封装读取逻辑 #

父域页面隐藏嵌入上述子域桥接页面，通过postMessage发送读取请求、监听返回结果即可：

import { useEffect, useRef, useState } from 'react';

function HomePage() {
  const iframeRef = useRef(null);
  const [authData, setAuthData] = useState(null);

  useEffect(() => {
    // 监听子域返回的消息
    const handleMessage = (event) => {
      if (event.origin !== 'https://app.awesomedomain.com') return;
      if (event.data.type === 'localStorageResponse' && event.data.key === 'user_auth') {
        setAuthData(event.data.value ? JSON.parse(event.data.value) : null);
      }
    };
    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  // 触发读取子域存储的方法
  const fetchSubdomainStorage = () => {
    if (!iframeRef.current) return;
    iframeRef.current.contentWindow.postMessage({
      type: 'getLocalStorage',
      key: 'user_auth' // 替换为你实际存储鉴权数据的键名
    }, 'https://app.awesomedomain.com');
  };

  return (
    <div>
      {/* 隐藏嵌入子域桥接页 */}
      <iframe 
        ref={iframeRef}
        src="https://app.awesomedomain.com/local-storage-bridge.html"
        style={{ display: 'none' }}
        onLoad={fetchSubdomainStorage}
      />
      {/* 父域页面其他业务逻辑 */}
    </div>
  );
}

export default HomePage;

方案2：Cookie域共享（适合调整存储逻辑的场景） #

如果可以修改子域的存储逻辑，更简单的方式是将鉴权数据存入Cookie并设置父域共享，父子域名可直接读取无需跨域通信：

// 子域存储鉴权Cookie时的配置，domain前加`.`代表所有子域名共享
document.cookie = `user_auth=${JSON.stringify(authData)}; domain=.awesomedomain.com; path=/; secure; SameSite=Lax`;

注意事项 #

• 两种方案都要求站点使用HTTPS协议，否则浏览器会限制跨域通信或Cookie共享
• 敏感鉴权数据建议加密后存储，避免数据泄露
• postMessage通信必须做来源校验，防止恶意站点伪造请求窃取数据

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