javascript - 唯一标识重复的 Chrome 标签页

Question

我目前正在使用 window.sessionStorage存储唯一生成的 session ID。此 ID 会传递给对服务器的所有 ajax 调用，并在页面导航和重新加载过程中持续存在。

这似乎非常适合我的目标浏览器，但有一点需要注意:Chrome 中的重复标签功能。

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

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

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

Answer 1

这个变体对我有用:

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

诀窍是仅在刷新选项卡时将 ID 放入 session 存储中的短暂时间

在我的 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)
})