How to keep an identifier unique to each browser tab?

Question

I am debugging problems launching our web application on multiple browser tabs and added a client log using log4javascript. Now I'm trying to determine which line of the log is written using the browser tab, so I want to add a unique tab identifier to each line of the log.

It all boils down to the fact that I need a way to determine that the browser tab is “new” and needs to get a new tab identifier. Tabs that already have a tab identifier must contain this identifier.

But I did not find a way to store such an identifier in such a way that:

• tab reload survives
• always different between tabs
• works in an iframe hosted in a different domain than the embed page

Here is what I tried:

• Save the tab identifier to the session repository and create a new identifier if the tab session repository does not already contain such an identifier.

  In most cases, this is very good. However, there are cases when a new tab starts with a full copy of the session store on the tab with which it was opened. It looks like a new tab opens by clicking on a hyperlink that refers to the purpose of the new window, or if the duplicate is duplicated. In this case, we cannot distinguish between the two tabs, so that both tabs end up using the same tab identifier.

• Attach the tab identifier to the HTML element using jQuery.data () and generate a new identifier if the data of the HTML element does not already contain such an identifier.

  This was stupid because it clearly could not stand the tab reload.

• Save the tab identifier in the window.name iframe that our application contains, and generate a new identifier if window.name does not already contain such an identifier.

  This does not work because the embed application that generates the HTML iframe tag (and which we cannot change) sets the iframe name, so the bookmark id is lost after each tab is reloaded.

• Save the tab identifier in window.top.name and create a new identifier if window.top.name does not already contain such an identifier.

  This does not work because we cannot set the name window.top.name due to security restrictions on different sites (the application for deployment is located in a different domain than the contents of our iframe).

• Paste another iframe into the iframe that our application contains, save the tab identifier in the window.name of this iframe and generate a new identifier if the internal iframe window.name does not yet contain such an identifier.

  This does not work, because although we do not explicitly define the internal name of the iframe when it is opened, the name of the iframe is reset to an empty string after the tab is reloaded. This is how we open the internal iframe:

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

I understand why the first four options did not work. I am not sure why the fifth option did not work, and I suspect that I could make a trivial mistake.

If not, I am wondering if there is another way that would allow me to determine that the tab is new and therefore needs to get a new tab identifier.

Answer 1

Why not try the combination: Page Hash + Local Storage. The hash of the page is the part that appears after # in the URL. This part can be read and updated using location.hash . You can use this part in the URL to add and save the identifier of your tab even when you reboot.

You can then use localStorage to track already used identifiers. If the tab is loaded without a hash value, it generates it, saves it localStorage and uses that value as id. If it comes with a hash (for example, after a reboot), the page checks to see if this value is written or not. If not, he uses it. Otherwise, it generates another.