子域间LocalStorage访问疑问：www.domain.com与app.domain.com能否互访？

核心结论 #

• LocalStorage遵循严格同源策略，默认不支持跨子域直接访问：只有当两个页面的协议、主域名、端口完全一致时，才能共享LocalStorage。www.domain.com和app.domain.com属于不同子域，默认无法互相读取对方的LocalStorage。
• 若要实现同一主域名下的子域共享，可通过设置document.domain为相同主域名（如domain.com），但该方式有端口一致等局限性。

本地测试步骤 #

1. 配置本地hosts文件 #

修改本地hosts文件，将两个子域指向本地IP（127.0.0.1）：

127.0.0.1 www.domain.com
127.0.0.1 app.domain.com

• Windows路径：C:\Windows\System32\drivers\etc\hosts
• macOS/Linux路径：/etc/hosts
  修改后需保存（需管理员权限）。

2. 搭建模拟www.domain.com的静态服务 #

创建www.html文件，用于存储LocalStorage数据：

<!DOCTYPE html>
<html>
<body>
  <h1>www.domain.com 存储LocalStorage</h1>
  <script>
    // 可选：若尝试跨子域共享，需先设置document.domain
    // document.domain = 'domain.com';
    localStorage.setItem('testKey', 'Hello from www.domain.com');
    console.log('已存储数据:', localStorage.getItem('testKey'));
  </script>
</body>
</html>

用静态服务器启动（以Python为例）：

# Python 3
python -m http.server 80

访问http://www.domain.com，打开控制台确认数据已存储。

3. 配置并启动React应用（app.domain.com） #

• 若没有React项目，先创建：npx create-react-app app-domain
• 修改package.json的启动脚本，指定域名和端口（需与www服务端口一致）：

  "scripts": {
    "start": "HOST=app.domain.com PORT=80 react-scripts start"
  }
  

• 在src/App.js中添加读取LocalStorage的逻辑：

  import { useEffect } from 'react';
  
  function App() {
    useEffect(() => {
      // 可选：若尝试跨子域共享，需同步设置document.domain
      // document.domain = 'domain.com';
      const value = localStorage.getItem('testKey');
      console.log('从app.domain.com读取到的数据:', value);
      alert('读取结果：' + (value || '未读取到数据'));
    }, []);
  
    return (
      <div className="App">
        <h1>app.domain.com 读取LocalStorage</h1>
      </div>
    );
  }
  
  export default App;
  

• 启动React应用：npm start，访问http://app.domain.com查看结果。

4. 测试两种场景 #

• 默认场景：不设置document.domain，app.domain.com无法读取到数据，控制台显示null。
• 跨子域共享场景：在两个页面的脚本中都添加document.domain = 'domain.com'，刷新后app.domain.com可读取到www.domain.com存储的数据。

注意事项 #

• 设置document.domain后，两个页面的端口必须完全一致，否则仍无法共享。
• 该跨子域方式仅适用于同一主域名下的子域，无法跨完全不同的主域名。
• 生产环境中，如需更安全的跨域数据共享，建议通过后端接口中转，或使用配置了domain=.domain.com的Cookie配合后端处理。

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