唯一标识重复的 Chrome 标签页

Question

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

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

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

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

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

Answer 1

这个的一个变体对我有用：

/sf/answers/4211487801/

诀窍是仅在刷新选项卡时的短暂时间内将 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)
})

Answer 2

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

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

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

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