javascript - 如何存储每个浏览器选项卡唯一的 ID？

Question

我正在调试在多个浏览器选项卡中运行我们的网络应用程序的问题，并使用 log4javascript 添加了一个客户端日志。我现在正试图确定哪个日志行是由哪个浏览器选项卡写入的，因此我想为每个日志行添加一个唯一的选项卡 ID。

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

但我还没有找到一种方法来存储这样的 ID:

• 在选项卡重新加载后仍然存在
• 标签之间总是不同的
• 在与嵌入页面不同的域中托管的 iframe 中工作

这是我尝试过的:

1. 将选项卡 ID 存储在 session 存储 中，如果选项卡的 session 存储尚不包含此类 ID，则生成一个新 ID。

   这在大多数情况下都非常有效。但是，在某些情况下，新选项卡以打开它的选项卡的 session 存储的完整副本开始。当通过单击引用新窗口目标的超链接打开新选项卡时，或者如果选项卡被复制，情况似乎就是这种情况。在这种情况下，我们无法区分这两个选项卡，因此这两个选项卡最终都使用相同的选项卡 ID。

2. 使用 jQuery.data() 将选项卡 ID 附加到 HTML 元素，如果 HTML 元素的数据尚未包含此类 ID，则生成一个新 ID。

   这很愚蠢，因为它显然无法在选项卡重新加载后继续存在。

3. 将选项卡 ID 存储在包含我们应用程序的 iframe 的 window.name 中，如果 window.name 尚未包含此类 ID，则生成一个新 ID。

   这是行不通的，因为生成 HTML iframe 标签(我们无法更改)的嵌入应用程序设置了 iframe 名称，因此标签 ID 在每次重新加载标签后都会丢失。

4. 将选项卡 ID 存储在 window.top.name 中，如果 window.top.name 尚未包含这样的 ID，则生成一个新 ID。

   这是行不通的，因为由于跨站点安全限制，我们无法设置 window.top.name(嵌入应用程序托管在与我们的 iframe 内容不同的域中)。

5. 在包含我们应用程序的 iframe 中嵌入另一个 iframe，将选项卡 ID 存储在该 iframe 的 window.name 中，如果内部 iframe 的 window.name 不存在，则生成一个新 ID还没有包含这样的 ID。

   这不起作用，因为即使我们在打开时没有明确设置内部 iframe 的名称，iframe 的名称也会在选项卡重新加载时重置为空字符串。这是我们打开内部 iframe 的方式:

   <iframe id="iframe2" src="index.jsp"></iframe>

我明白为什么前四个选项不起作用。我不确定为什么第五个选项效果不佳，并怀疑我可能犯了一个微不足道的错误。

如果不是，我想知道是否有任何其他方法可以让我识别一个标签是新标签并因此需要接收新标签 ID 的事实。

Answer 1

这是在单个选项卡中拥有唯一 ID 的简单解决方案，它在选项卡重新加载时保持不变。对于另一个打开的标签 ID 将不同。

这里的关键是使用 sessionStorage，它只保留每个 session (打开的选项卡)的数据。

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