[Fixed]-Store browser tab specific data

by

7👍

✅

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.

👤Marcus Riemer

21👍

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

👤bedrin

0👍

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.
👤olofom

Leave a comment