如何存储每个浏览器标签页唯一的 ID？

Question

我正在解决我们的Web应用在多个浏览器标签中运行时出现的问题，并使用log4javascript添加了客户端日志。现在，我想确定哪个日志行是由哪个浏览器标签编写的，因此我想将唯一的标签ID添加到每个日志行中。

这归结为我需要一种方法来确定浏览器标签是“新”的并且需要接收新的标签ID。已经收到标签ID的选项卡应保留此ID。

但是，我还没有找到以方式存储此类ID，使其：

- 在选项卡重新加载之后仍然有效 - 在标签之间始终不同 - 在托管在与嵌入页面不同的域中的iframe内部工作

以下是我尝试过的方法：

1. 将选项卡ID存储在session storage中，并在选项卡的会话存储中尚未包含此类ID时生成新ID。 在大多数情况下，这很有效。但是，在某些情况下，新选项卡从打开它的选项卡的会话存储中完整复制启动。当通过引用新窗口目标的超链接或复制选项卡时，似乎就是这种情况。在这种情况下，我们无法区分两个选项卡，因此两个选项卡最终使用相同的选项卡ID。

2. 使用jQuery.data（）将选项卡ID附加到HTML元素并在HTML元素的数据尚未包含此类ID时生成新ID。 这很愚蠢，因为它显然无法在选项卡重新加载时生效。

3. 在包含我们的应用程序的iframe的window.name中存储选项卡ID，并在window.name尚未包含此类ID时生成新ID。 这不起作用，因为生成HTML iframe标记的嵌入式应用程序（我们不能更改）设置了iframe名称，因此每次重新加载选项卡后都会丢失选项卡ID。

4. 将选项卡ID存储在window.top.name中，并在window.top.name尚未包含此类ID时生成新ID。 这不起作用，因为由于跨站点安全限制（嵌入式应用程序托管在与iframe内容不同的域中），我们无法设置window.top.name。

5. 在包含我们的应用程序的iframe内部嵌入另一个iframe，将选项卡ID存储在该iframe的window.name中，并在内部iframe的window.name尚未包含此类ID时生成新ID。 这不起作用，因为即使我们在打开它时没有明确设置内部iframe的名称，但是在选项卡重新加载时，iframe的名称也将重置为空字符串。以下是我们打开内部iframe的方式： 我理解为什么前四个选项没有起作用。我不确定为什么第五个选项也不起作用，怀疑可能是由于我的小错误。

如果不是这样，我想知道是否有其他的方法可以确定一个标签页是新的，因此需要获得一个新的标签页ID。

- Piers Uso Walter

---

这个答案可能会对你有所帮助：https://dev59.com/gmct5IYBdhLWcg3wsPZ5#36807854 - M Rostami

Answer 1

这里有一个简单的解决方案，可以在单个标签页内拥有唯一的ID，并且在重新加载标签页时保持不变。对于另一个打开的标签页，ID将是不同的。

关键在于使用sessionStorage，它仅在会话期间（打开的标签页）保留数据。

const idFromStorage = sessionStorage.getItem("ID_KEY");
if (idFromStorage) {
    return idFromStorage;
} else {
    const id = uuid(); // generate unique UUID
    sessionStorage.setItem("ID_KEY", id);
    return id;
}

- Michael

---

sessionStorage 在标签页复制时仍然存在。 - standbyoneself

@standbyoneself 你是说如果一个标签页从另一个标签页复制（即使用右键+“复制标签页”功能），不同标签页的ID会发生冲突吗？ - undefined

Answer 2

为什么不尝试一种组合：页面的哈希值 + 本地存储。页面的哈希值是在 URL 中 # 后面的部分。可以使用 location.hash 来读取和更新该部分。您可以在 URL 中使用该部分来附加并持久化您的选项卡 ID，即使在重新加载后也是如此。

然后，您可以使用 localStorage 来跟踪已使用的 ID。如果选项卡没有哈希值加载，则会生成一个哈希值，将其保存到 localStorage 并将该值用作 ID。如果它带有哈希值（例如重新加载后），则页面会检查该值是否已记录。如果没有，则使用它。否则，它会生成另一个哈希值。

- Joseph