唯一标识重复的 Chrome 标签页答案

【问题标题】：Uniquely identify a duplicated Chrome tab唯一标识重复的 Chrome 标签页
【发布时间】：2015-04-29 10:11:20
【问题描述】：

我目前正在使用window.sessionStorage 来存储唯一生成的会话 ID。此 ID 将传递给对服务器的所有 ajax 调用，并在页面导航和重新加载时保持不变。

这似乎非常适合我的目标浏览器，但有一个警告：Chrome 中的重复标签功能。

复制选项卡会将会话存储复制到新选项卡。当新选项卡加载并与服务器通信时，它现在具有与复制的目标选项卡相同的“唯一”标识符。

有什么方法可以区分两个重复的选项卡吗？还是它们真的是重复的，两者之间没有信息不同？

关闭选项卡/窗口后没有任何内容，因此即使是简单的数字选项卡 ID 或任何内容，只要它对于当前实例是唯一的，它就可以工作。

【问题讨论】：

标签： javascript google-chrome session web-applications

【解决方案1】：

这对我有用：

https://stackoverflow.com/a/60164111/13375384

诀窍是仅在标签刷新时将 ID 放入会话存储中的短暂时间

在我的 TypeScript 项目中，解决方案如下所示：

const tabIdKey = "tabIdStorageKey"
const initTabId = (): string => {
  const id = sessionStorage.getItem(tabIdKey)
  if (id) {
    sessionStorage.removeItem(tabIdKey)
    return id
  }
  return uuid()
}
const tabId = initTabId()
window.addEventListener("beforeunload", () => {
  sessionStorage.setItem(tabIdKey, tabId)
})

【讨论】：

这个技巧帮助我区分标签刷新和标签重复。谢谢@CodyHerzog！

【解决方案2】：

会话存储在浏览器级别，而不是选项卡级别。见https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage。

我知道识别标签的唯一方法是在每个 URL 的末尾传递一个参数（即使这样，您也需要使用 JavaScript 来防止在新标签中打开）。

其他方法是无法忍受的，例如在应用中嵌入 iframe（并将标识符存储在父级中），但可能。

简而言之，您应该将问题改写为简单地识别一个选项卡，但您仍然找不到答案。

【讨论】：

我不明白。引用文档中的第一段指出“在新选项卡或窗口中打开页面将导致启动新会话”。这不是与你所说的直接矛盾吗？我在实践中依靠这种区别在不同的选项卡中建立多个并发会话。现在它似乎在谷歌浏览器中被破坏了，每个新标签都会劫持现有标签的会话 ID。
我的错。看起来谷歌浏览器仍然像我预期的那样工作，至少在一些可证明的情况下。也就是说，如果我在同一个浏览器窗口中打开一个新选项卡，它将获得一个干净的 sessionStorage 上下文。如果选项卡被刷新，它会独立于其他选项卡保留其 sessionStorage 上下文。我在其他浏览器中看到了一些关于不一致的讨论，但据我所知，这是正确的实现。
至于原问题，属于“重复标签”机制，我证实了他的观察。我从没想过使用“重复选项卡”机制来产生一个新会话。我得注意这一点。

【解决方案3】：

我对此的最终解决方案是在服务器端生成一个唯一 ID，该 ID 存储在服务器会话中并传回以存储在 sessionStorage 中。我还有另一个在客户端设置并存储的值（我们称之为 FOO）。假装它在地图中看起来像这样：

{
    "unique_id" : "ABC123",
    "FOO" : "some value"
}

我通过每个 ajax 请求将值发送到服务器。

在页面加载时，我检查是否已经在 sessionStorage 中拥有 unique_id、FOO 对并加载它们。每当 FOO 的值发生变化时，它都会与服务器对进行比较。如果它具有不同的值，那么我将 FOO 的新值存储在 new 唯一 ID 下，然后将其交还给客户端。

这并不能 100% 解决问题，但它确实确保了代表某些持久状态的 FOO 在制表符复制后永远不会被错误地使用。最初具有 unique_id, FOO 对的选项卡将继续具有该对，而复制的选项卡将具有一个新对。

从技术上讲，在 FOO 的值更改之前，两个选项卡共享相同的 unique_id，但只要在 FOO 更改时重新分配 unique_id，它们就不会在服务器会话中覆盖彼此的状态。

【讨论】：