跨浏览器实现各标签页独立sessionNumber方案咨询（基于window.sessionStorage）

你遇到的问题核心是不同浏览器对sessionStorage的会话隔离策略不一致：Chrome中同源新标签页会创建独立的sessionStorage实例，而Opera中同源标签页共享同一个sessionStorage，导致生成的sessionNumber重复。要实现跨浏览器的标签页独立标识，可以采用以下方案：

方案：利用window.name实现标签页唯一标识 #

window.name是每个浏览器标签页独有的属性，其值在标签页的整个生命周期内保持不变（即使页面刷新也不会丢失，直到标签页关闭），且跨浏览器行为一致，完全满足你需要的“每个标签页独立标识”的需求。

实现代码如下：

function getTabUniqueId() {
    // 检查window.name是否已存在我们定义的标签页标识
    if (window.name && window.name.startsWith('tab-')) {
        return window.name.slice(4);
    }
    // 生成新的唯一标识，优先使用更安全的UUID
    const uniqueId = crypto.randomUUID ? crypto.randomUUID() : Math.floor(Math.random() * 100000000 + 1).toString();
    window.name = `tab-${uniqueId}`;
    return uniqueId;
}

方案优势 #

• 跨浏览器兼容：所有现代浏览器（包括Chrome、Opera、Firefox、Edge等）对window.name的行为一致，每个标签页拥有独立的window.name值。
• 持久化性：标签页刷新后，window.name的值不会改变，确保同一标签页内的标识始终一致，符合锁定机制的需求。
• 实现简单：无需复杂的存储监听或跨标签页通信，直接利用浏览器原生属性即可。

补充说明 #

如果需要更安全的随机标识，推荐使用crypto.randomUUID()（现代浏览器均支持），它能生成符合RFC 4122标准的UUID，比Math.random()生成的随机数碰撞概率更低。

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