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?

Extranuclear

Answer 1

Edit: The passage of time has rendered my original answer from 2012 incorrect. As bedrin points out, you may now use the Window.sessionStorage object:

The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

Original Answer (2012):

I am afraid this won't be possible in a portable way, as you have found out yourself it is not possible to retrieve something like a browser tab ID. The HTML standards are, as far as I am aware, completely unaware of tabs in browsers.

The only workaround I can think is would be this: Implement and mange tabs in your application. I have seen several business web applications that do this, but (imho) the user experience is quite bad.

Ruffle

That's too bad... I've started working on a non-100%-reliable workaround solution, cause I fear that you are right. – Extranuclear

Answer 2

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

Eczema

The window.name property is works well, it is a good solution for store a simple data per browsertab! – Haymes

Answer 3

So I've made one solution that seems to work pretty good NO IT DOESNT. See the last problem-bullet. I'm still hoping for better ideas so please let me know if you've got on!

Anyway; here's how I did it. Keep in mind that this is not a 100% fool-proof solution, if a user "misbehaves" and refreshes multiple tabs at the same time it can get confused:

base.html (which all pages inherits) ({{ A }} renders a variable from Django):

// This is executed right before leaving the page
window.onunload = function() {
    if( '{{ A }}' != null ) 
        var prev_A = '{{ A }}';
    else if (typeof previous_A != 'undefined') {
        var prev_A = previous_A;
    else 
        var prev_A = '';
    localStorage.setItem('a', prev_A);
};
// Remove the local storage as soon as you get to this page
localStorage.removeItem('a');

B_base.html (the base template of all B's. B_base.html also inherits base.html. I put this code to execute just before the code in base.html)

var previous_A = localStorage.getItem('a');

So basically what I get is that every page sets the localStorage 'a' when it leaves the page and deletes the localStorage 'a' as soon as it enters the page, except for the B-pages that first save 'a' as a local variable before deleting it.

Problems:

• Opening links in multiple tabs at the same time will overwrite this variable and one tab will be without previous_A.
• Closing an A tab without going anywhere, then open a new B-page directly will result in that the B-tab has the closed A's value in it's previous_A.
• Open B-links in new tabs from A-page does not give them the link back... This is the dealbreaker.

Extranuclear

Imho, thats a interesting hack from a technical point point of view, but not a good idea from a usability point of view. Good UI design is, besides other things, also about minimizing surprising and inconsistent behavior. And the problems you describe don't seem like they can easily be memorized (and therefore avoided) by an average user. – Ruffle

Nah, you're right, I removed it again after testing it for a little while. Since it doesn't work 100% as the user expected it's not useful for me. – Extranuclear