页面关闭后如何保存标签页信息并复用已有标签页打开URL？

可以实现该需求，不需要存储window对象，利用浏览器原生特性即可完成，具体方案如下：

核心逻辑基础 #

window.open()方法的第二个参数为窗口目标名称，同源策略下，只要浏览器中存在对应名称且未关闭的标签页，再次调用相同名称参数的window.open()时，浏览器会直接将新URL加载到该已有标签页，不会重复新开。你之前遇到重复新开的问题，是因为没有利用好这个特性，或是需要兼容跨源/自定义控制场景，可以对应选择下面的方案。

方案1：直接复用窗口名称（最简单，适合同源场景） #

无需修改太多原有逻辑，只要保持window.open的第二个参数固定即可，原生就支持标签页复用：

// 只要名称为myWindow的同源标签页还存活，就会直接在该标签页加载新URL，不会新开
window.open('待打开的目标URL', 'myWindow').focus();
// 原有关闭当前页的逻辑保持不变
window.open('', '_self').close();

如果需要跨源打开URL，或是要自定义控制标签页状态，用下面的方案2。

方案2：跨标签页通信方案（支持自定义控制、兼容更多场景） #

用Broadcast Channel API实现跨标签页通信，主动通知已有的目标标签页更新地址，没有存活的目标页时再走新开逻辑：

第一步：在被打开的目标标签页中注册监听 #

// 初始化时创建通信通道，通道名称要和入口页保持一致
const urlChannel = new BroadcastChannel('target_url_update');
// 监听入口页发送的URL更新消息
urlChannel.onmessage = (e) => {
  if (e.data.type === 'refresh_url') {
    // 收到新URL直接更新当前页面地址
    window.location.href = e.data.targetUrl;
    // 回传更新成功的确认消息
    urlChannel.postMessage({ type: 'update_done' });
  }
};
// 标签页关闭前销毁通道
window.addEventListener('beforeunload', () => {
  urlChannel.close();
});

第二步：在入口页（你当前开发的接收URL的页面）中实现判断逻辑 #

const urlChannel = new BroadcastChannel('target_url_update');
let hasAliveTab = false;
// 监听目标页的确认消息
urlChannel.onmessage = (e) => {
  if (e.data.type === 'update_done') {
    hasAliveTab = true;
    // 确认更新成功后关闭当前页
    window.open('', '_self').close();
  }
};
// 先给已有的目标标签页发送更新URL的通知
urlChannel.postMessage({
  type: 'refresh_url',
  targetUrl: '待打开的目标URL'
});
// 300ms没收到确认说明没有存活的目标标签页，走新开逻辑
setTimeout(() => {
  if (!hasAliveTab) {
    window.open('待打开的目标URL', 'myWindow').focus();
    window.open('', '_self').close();
  }
  urlChannel.close();
}, 300);

注意事项 #

• 所有方案都受浏览器同源策略限制，跨源场景下无法直接操作其他标签页的内容，仅可使用方案1的窗口名称复用逻辑
• 不需要额外存储标签页信息到localStorage，上述两种方案都可以直接覆盖需求

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