Question

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

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

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

有什么办法可以区分两个重复的标签吗？或者它们是否真的重复，两者之间的信息不同？

标签/窗口关闭后没有任何内容持续存在，因此即使是简单的数字标签ID或任何内容，只要它对于当前实例是唯一的，就会起作用。

Answer 1

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

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

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

简而言之，您应该将问题改为简单地识别标签，但您仍然无法找到答案。

Answer 2

我最终的解决方案是在服务器端生成一个唯一的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，它们就不会在服务器会话中覆盖彼此的状态。 / p>

Answer 3

其中一个变种对我有用：

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)
})

唯一标识重复的Chrome标签

3 个答案: