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

How to store an ID that is unique per browser tab?

本文关键字：选项 浏览器 唯一 ID 何存储 存储      更新时间：2023-09-26

我正在调试在多个浏览器选项卡中运行我们的web应用程序的问题，并使用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。

    这不起作用，因为我们不能设置window.top.name由于跨站点的安全约束(嵌入应用程序托管在不同的域比我们的iframe的内容)。

  5. 将另一个iframe嵌入到包含我们的应用程序的iframe中，将标签ID存储在该iframe的window.name中，如果内部iframe的window.name尚未包含这样的ID，则生成一个新的ID。

    这不起作用，因为即使我们在打开iframe时没有显式设置内部iframe的名称，iframe的名称在tab重新加载时被重置为空字符串。下面是我们打开内部iframe的方式:

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

我明白为什么前四个选项不起作用。我不确定为什么第五个选项没有那么好，我怀疑我可能犯了一个小错误。

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

这是在单个选项卡中具有唯一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;
}

为什么不试试组合:页面的哈希值+本地存储。页面的哈希值是url中#之后的部分。该部分可以使用location.hash读取和更新。你可以在url中使用这个部分来附加和保存标签的id，甚至在重载时也是如此。

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

相关文章：