NextJS中如何向新标签页的页面传递数据？

下面是几种适合传递较大数据对象的方案，可根据你的场景选择：

1. 使用localStorage/sessionStorage临时存储 #

在原页面点击按钮时，先把数据序列化为JSON存入浏览器存储，再打开新标签页；新标签页加载后读取存储数据，用完及时清理避免占用空间。

示例代码：

• 原页面（/app/mypage/）：

// 假设data是从数据库加载的大对象
document.getElementById('openEditBtn').addEventListener('click', () => {
  // 优先用sessionStorage，会话结束自动清除，更安全
  sessionStorage.setItem('editPageData', JSON.stringify(data));
  // 打开新标签页
  window.open('/app/mypage/edit', '_blank');
});

• 编辑页面（/app/mypage/edit）：

window.addEventListener('load', () => {
  const storedData = sessionStorage.getItem('editPageData');
  if (storedData) {
    const data = JSON.parse(storedData);
    // 用数据渲染页面
    // 用完删除，避免残留
    sessionStorage.removeItem('editPageData');
  }
});

优缺点：实现简单，兼容性拉满；但存储有大小限制（一般5MB左右），敏感数据需谨慎使用。

2. 使用postMessage跨标签页通信 #

如果两个页面同域，可以用postMessage实时传递数据。需要先打开新标签页，待其加载完成后再发送数据。

示例代码：

• 原页面：

const editWindow = window.open('/app/mypage/edit', '_blank');

// 监听新标签页加载完成后发送数据
editWindow.addEventListener('load', () => {
  editWindow.postMessage(data, window.location.origin);
});

• 编辑页面：

window.addEventListener('message', (event) => {
  // 验证消息来源，确保是同域页面
  if (event.origin === window.location.origin) {
    const data = event.data;
    // 用数据执行后续操作
  }
});

优缺点：无需存储数据，传递大小限制更宽松；但依赖标签页加载时机，要处理异步场景，且必须同域。

3. 服务器端临时缓存（适合超大对象） #

如果数据体积超出浏览器存储上限，可以在原页面将数据提交到服务器临时缓存（比如Redis，设置短过期时间），获取一个唯一token；打开新标签页时把token作为URL参数传递，编辑页面用token从服务器取回缓存数据。

示例流程：

1. 原页面点击按钮时，发送POST /api/temp-cache请求，携带数据；
2. 服务器返回唯一token；
3. 打开新标签页：window.open(/app/mypage/edit?token=${token}, '_blank')；
4. 编辑页面加载时，用token请求GET /api/temp-cache/${token}获取数据；
5. 服务器返回数据后立即删除缓存。
   优缺点：支持超大数据，安全性更高；但需要额外开发服务器端逻辑，增加了复杂度和临时存储成本。

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