如何使右键新标签打开链接时保留rel="opener"以共享sessionStorage

右键菜单选择“在新标签页打开链接”属于浏览器的独立导航行为，并非由原页面主动触发的跳转，此时浏览器不会建立opener关联。而直接点击<a>标签时，是原页面主动发起的跳转，rel="opener"会让新标签页与原页面处于同一浏览上下文组，因此能共享sessionStorage。右键打开的新标签页属于全新的浏览上下文，sessionStorage独立，自然无法获取原页面的数据。

1. 替换为localStorage（最简单方案） #

如果业务允许数据在同域所有标签页间共享且持久化到本地（直到主动清除），直接用localStorage替代sessionStorage即可。无论通过哪种方式打开新标签页，同域下都能访问到相同的localStorage数据，无需修改链接属性。

2. 拦截右键打开行为，用window.open模拟 #

通过JavaScript拦截右键菜单的打开行为，强制用window.open打开链接（该方法默认会建立opener关联），确保两种打开方式的上下文一致。注意：这种方式需要自定义右键菜单或拦截默认行为，可能影响用户习惯，需权衡。

示例代码：

<a href="/myhref" target="_blank" rel="opener" class="persist-opener">My Link</a>

<script>
document.querySelectorAll('.persist-opener').forEach(link => {
  // 自定义右键菜单，替换默认的“在新标签页打开”选项
  link.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    
    // 创建临时右键菜单
    const menu = document.createElement('div');
    menu.style.cssText = `
      position: absolute;
      top: ${e.pageY}px;
      left: ${e.pageX}px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 8px 0;
      min-width: 150px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      z-index: 9999;
    `;

    // 添加“在新标签页打开”选项
    const openOption = document.createElement('div');
    openOption.textContent = '在新标签页打开';
    openOption.style.cssText = `
      padding: 6px 16px;
      cursor: pointer;
    `;
    openOption.addEventListener('mouseover', () => {
      openOption.style.background = '#f5f5f5';
    });
    openOption.addEventListener('click', () => {
      // 用window.open打开，保持opener关联
      window.open(link.href, '_blank');
      menu.remove();
    });

    menu.appendChild(openOption);
    document.body.appendChild(menu);

    // 点击页面其他区域关闭菜单
    const closeMenu = () => {
      menu.remove();
      document.removeEventListener('click', closeMenu);
    };
    document.addEventListener('click', closeMenu);
  });
});
</script>

3. 后端配合传递临时数据（适合严格依赖sessionStorage的场景） #

如果必须保留sessionStorage的标签页独立性，可通过URL传递临时令牌，让新标签页从后端获取原页面的sessionStorage数据：

原页面处理： #

// 生成唯一临时令牌
const tempToken = crypto.randomUUID();
// 将当前sessionStorage数据提交到后端存储，关联令牌
fetch('/api/store-session', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    token: tempToken,
    data: Object.fromEntries(sessionStorage.entries())
  })
});
// 给链接添加令牌参数
const link = document.querySelector('.persist-opener');
link.href = `${link.href}?token=${tempToken}`;

新页面处理： #

// 从URL提取令牌
const urlParams = new URLSearchParams(window.location.search);
const tempToken = urlParams.get('token');

if (tempToken) {
  // 从后端获取关联的session数据
  fetch(`/api/get-session?token=${tempToken}`)
    .then(res => res.json())
    .then(data => {
      // 将数据存入当前标签页的sessionStorage
      Object.entries(data).forEach(([key, value]) => {
        sessionStorage.setItem(key, value);
      });
      // 清理后端临时数据
      fetch(`/api/clear-session?token=${tempToken}`, { method: 'DELETE' });
    });
}

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