唯一标识重复的Chrome标签 [英] Uniquely identify a duplicated Chrome tab

问题描述

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

I am currently using window.sessionStorage to store a uniquely generated session ID. This ID is passed to all ajax calls to the server and persists across page navigation and reloads.

这似乎很适合我的目标浏览器，但有一个警告:Chrome中的重复标签功能.

This seems to work perfectly for my target browsers, with one caveat: the duplicate tab functionality in Chrome.

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

Duplicating the tab copies the session storage to the new tab. When the new tab loads and communicates with the server, it now has the same "unique" identifier as the duplicated target tab.

我有什么方法可以区分两个重复的标签吗?还是它们确实是重复的，并且两者之间没有信息相同?

Are there any ways that I can distinguish between the two duplicated tabs? Or are they truly duplicates and no information is different between the two?

关闭标签页/窗口后，任何操作都不会持续，因此，即使简单的数字标签ID或其他任何东西也可以使用，只要它对于当前实例是唯一的即可.

Nothing persists after the tab/window is closed, so even a simple numeric tab id or anything would work as long as it is unique for that current instance.

推荐答案

此方法的一种变体对我有用:

A variant of this worked for me:

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

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

The trick is to only put the ID in session storage for the brief period of time when the tab is refreshing

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

In my TypeScript project, the solution looked like this:

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标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！