同域子站点击打开新标签页传递大JSON数据的实现方案咨询

当然能实现！而且完全不需要借助数据库，靠浏览器本身的同域特性就能搞定，给你两种实用的方案：

方案一：用sessionStorage临时存储传递数据 #

sessionStorage是浏览器提供的会话级存储，同主域的子站点可以共享，刚好适合临时传递大型数据：

• 步骤1：在seconSite的create页面处理点击事件
  在触发点击时，把你的大型JSON转成字符串存入sessionStorage，再打开新标签页：

  // 假设你的按钮ID是transfer-btn
  document.getElementById('transfer-btn').addEventListener('click', () => {
    // 这里替换成你的大型JSON对象
    const bigJsonData = {
      // 超过5000长度的内容...
    };
    // 存入sessionStorage
    sessionStorage.setItem('tempBigData', JSON.stringify(bigJsonData));
    // 打开display页面的新标签
    window.open('https://firstSite.mydomain.com/display', '_blank');
  });
  

• 步骤2：在firstSite的display页面读取数据
  页面加载时从sessionStorage取出数据，处理完成后建议删除避免残留：

  window.addEventListener('load', () => {
    const storedDataStr = sessionStorage.getItem('tempBigData');
    if (storedDataStr) {
      const bigJsonData = JSON.parse(storedDataStr);
      // 这里写你的数据处理逻辑
      console.log('收到的大型数据：', bigJsonData);
      // 用完删除，防止占用存储或后续冲突
      sessionStorage.removeItem('tempBigData');
    }
  });
  

• 小提醒：sessionStorage会在关闭标签页后自动清除，不用担心数据残留；如果怕多个操作冲突，可以给存储key加个唯一标识（比如时间戳）。

方案二：通过window.open + postMessage实时传递数据 #

这种方法不用依赖存储，直接在两个窗口间传递数据，更实时灵活：

• 步骤1：在seconSite的create页面发送数据
  打开新窗口后，等页面加载完成再通过postMessage发送数据：

  document.getElementById('transfer-btn').addEventListener('click', () => {
    const bigJsonData = {
      // 你的大型JSON内容
    };
    // 打开新窗口并保存引用
    const displayWindow = window.open('https://firstSite.mydomain.com/display', '_blank');
    
    // 轮询检查新窗口是否加载完成，确保能接收消息
    const checkLoadStatus = setInterval(() => {
      if (displayWindow.document.readyState === 'complete') {
        clearInterval(checkLoadStatus);
        // 发送数据，指定目标域名确保安全
        displayWindow.postMessage(bigJsonData, 'https://firstSite.mydomain.com');
      }
    }, 100);
  });
  

• 步骤2：在firstSite的display页面接收数据
  监听message事件，记得验证发送方域名防止恶意请求：

  window.addEventListener('message', (event) => {
    // 只接收来自seconSite的消息，避免安全风险
    if (event.origin === 'https://seconSite.mydomain.com') {
      const bigJsonData = event.data;
      // 处理你的数据
      console.log('收到的大型数据：', bigJsonData);
    }
  });
  

• 小提醒：一定要验证event.origin，这是防止跨域恶意消息的关键；如果你的display页面加载很快，也可以用displayWindow.addEventListener('load', ...)代替轮询。

这两种方案都完全不需要数据库，利用浏览器的同域特性就能轻松实现需求，你可以根据自己的场景选择：如果追求简单省心，选sessionStorage；如果想要更实时的传递，选postMessage就行。

内容的提问来源于stack exchange，提问作者Jeya Suriya Muthumari