如何实现从指定标签页新开标签时传递Session Storage且不依赖URL参数？

要实现这个需求，核心思路是利用window.open创建的新标签页会保留对原页面的opener引用这一特性，结合sessionStorage的同源访问规则完成数据传递，同时确保手动打开的标签页无法获取其他会话的数据。

步骤1：拦截锚点的右键新标签页打开行为 #

在原页面中，给需要传递会话的锚点绑定右键事件，替换默认的“在新标签页打开”行为为通过window.open打开页面，这样新标签页会保留对原页面的opener引用。

// 给所有需要传递会话的锚点绑定事件（用data属性标识目标锚点）
document.querySelectorAll('a[data-pass-session]').forEach(anchor => {
  // 处理右键点击
  anchor.addEventListener('contextmenu', (e) => {
    e.preventDefault(); // 阻止默认右键菜单
    
    // 创建自定义右键菜单选项
    const menu = document.createElement('div');
    menu.style.cssText = 'position:fixed;top:'+e.clientY+'px;left:'+e.clientX+'px;background:#fff;border:1px solid #ccc;padding:8px;z-index:9999;';
    
    const newTabItem = document.createElement('div');
    newTabItem.textContent = '在新标签页打开（传递会话）';
    newTabItem.style.cssText = 'padding:4px 12px;cursor:pointer;';
    
    newTabItem.addEventListener('click', () => {
      window.open(anchor.href, '_blank');
      menu.remove();
    });
    
    // 点击页面其他区域关闭菜单
    document.addEventListener('click', () => menu.remove(), { once: true });
    document.body.appendChild(menu);
  });
  
  // 同时处理鼠标中键点击（确保中键打开也传递会话）
  anchor.addEventListener('mouseup', (e) => {
    if (e.button === 1) {
      e.preventDefault();
      window.open(anchor.href, '_blank');
    }
  });
});

说明：用data-pass-session属性标记需要传递会话的锚点，可根据实际业务调整选择器逻辑。

步骤2：新标签页接收并复制会话数据 #

在新打开的页面中，判断是否存在合法的opener（即是否从原标签页通过window.open打开），如果存在则复制原页面的sessionStorage数据到当前页面，随后断开opener引用避免后续干扰。

window.addEventListener('load', () => {
  // 验证opener是否同源且存在
  if (window.opener && window.opener.origin === window.origin) {
    try {
      // 复制原页面sessionStorage的所有键值对
      for (const key of window.opener.sessionStorage.keys()) {
        const value = window.opener.sessionStorage.getItem(key);
        window.sessionStorage.setItem(key, value);
      }
    } catch (e) {
      console.error('会话数据复制失败:', e);
    } finally {
      // 断开opener引用，消除安全风险和后续数据干扰
      window.opener = null;
    }
  }
});

方案符合需求的原因 #

• 从其他标签页打开的新标签页可获取原数据：通过window.open打开的页面保留opener引用，同源下可访问原页面的sessionStorage完成数据复制。
• 手动打开的标签页无法获取数据：手动打开的标签页window.opener为null，不会执行复制逻辑，保持独立的sessionStorage会话。
• 不依赖URL传递参数：所有数据传递通过opener引用完成，不会在URL中暴露任何会话信息。

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