Angular本地环境下localStorage/sessionStorage跨前端丢失问题咨询

核心问题是浏览器同源策略：哪怕都是localhost，只要两个项目端口不同，就属于完全不同的源。localStorage和sessionStorage是严格绑定当前源的，跨源跳转后自然无法读取到另一个源的数据，这跟angular.json配置无关。

可行解决方案 #

• URL参数临时传递（适合非敏感数据）
  跳转时把数据序列化后拼到目标URL的查询参数里：

  const yourData = { key: 'value' };
  const encodedData = encodeURIComponent(JSON.stringify(yourData));
  window.open(`${frontYurl}?data=${encodedData}`, '_self');
  

  前端Y中通过ActivatedRoute获取：

  import { ActivatedRoute } from '@angular/router';
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    this.route.queryParamMap.subscribe(params => {
      const dataStr = params.get('data');
      if (dataStr) {
        const yourData = JSON.parse(decodeURIComponent(dataStr));
        // 处理数据
      }
    });
  }
  

  注意：URL长度有限制，且敏感数据会暴露在地址栏，不适合私密信息。

• Cookie跨源共享（本地开发场景）
  把数据存在Cookie中，设置domain=localhost、path=/，让两个源都能读取：

  // 前端X设置Cookie
  const data = JSON.stringify({ key: 'value' });
  document.cookie = `sharedData=${encodeURIComponent(data)}; domain=localhost; path=/; SameSite=Lax;`;
  

  前端Y读取Cookie：

  const cookieValue = document.cookie
    .split('; ')
    .find(row => row.startsWith('sharedData='))
    ?.split('=')[1];
  if (cookieValue) {
    const yourData = JSON.parse(decodeURIComponent(cookieValue));
    // 处理数据
  }
  

  注意：Cookie最大4KB，且如果是生产环境HTTPS需要设置secure=true，跨域场景可能需要调整SameSite属性。

• 共享后端存储（生产级方案）
  搭建一个简单的后端服务（比如用Node.js/Java），前端X把数据提交到后端存入缓存（如Redis），前端Y跳转后从后端接口读取数据。这种方式安全可靠，适合敏感数据，完全不受同源策略限制。

• 本地开发同源化调试
  用反向代理让两个前端项目共享同一个域名端口：

  • Angular可以配置proxy.conf.json，把前端Y的请求代理到当前项目路径下；
  • 或者用Nginx配置，将localhost:4200/x指向前端X，localhost:4200/y指向前端Y，这样两个项目同源，localStorage/sessionStorage就能直接共享。

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