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

Question

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

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

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

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

这是我尝试过的：

1. 将标签 ID 存储在 会话存储 中，如果标签的会话存储尚不包含此类 ID，则生成新 ID。

   这在大多数情况下都非常有效。但是，在某些情况下，新选项卡以打开该选项卡的会话存储的完整副本开始。当通过单击引用新窗口目标的超链接打开新选项卡或选项卡重复时，似乎就是这种情况。在这种情况下，我们无法区分两个选项卡，因此两个选项卡最终使用相同的选项卡 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。

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

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

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

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

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

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

Answer 1

为什么不尝试组合：页面的哈希 + 本地存储。页面的哈希是 URL 中 # 之后的部分。可以使用location.hash 阅读和更新该部分。您可以在 url 中使用该部分来附加和保留选项卡的 id，即使在重新加载时也是如此。

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