Store browser tab specific data

Question

I have a web application that store information about recently visited pages, let's call them A. When a user visits another page type, called B, I render a menu at the top with a button to point to the most recently visited A-page. The B-pages are accessible either through an A page or a B page and can by the user be considered a property of A.

This works fine but it becomes a problem when someone opens two tabs and when being on a B-page in tab 1 with a link to the A-page A1 they open a new tab and visits the A-page A2. When the user then refreshes the B-page in tab 1 the menu changes to A2. I'd like to be able to identify what tab is being used so that I can save A1 for tab 1 so that it doesn't change to A2.

When using one tab:

A1 -> B1 -> B2 (the menu points back to A1)

When using two tabs:

Time            | T1       | T2       | T3          
----------------+----------+----------+-------------
Tab 1:          | A1 -> B1 |          | [refresh B1]
Tab 2:          |          | A2 -> B3 |             
----------------+----------+----------+-------------
Menu points to: | A1    A1 | A2    A2 | A2

This confuses the users when they back in tab 1 comes to the user they were viewing in tab 2 (A2) instead of A1.

I'm afraid that it isn't possible to get the browser tab ID but someone might have any ideas of a workaround?

Answer 1

HTML5 sessionStorage solves this issue:

Sites can add data to the session storage, and it will be accessible to any page from the same site opened in that window.

It is supported by all modern browsers

Another approach is to use window.name property. It is tab/window specific and will remain unchanged on browser navigation. So you can store some king of tab id inside your window.name property