In javascript, how can I uniquely identify one bro

Question

The users of my web application may have more than one browser window open and pointed to the same page. I would like the state of certain things in the page (loaded via ajax) to be retained across postbacks. I can either store in a cookie or on my server. Either way, I can't think of how I can distinguish each window.

For example, say user Bob has two browser windows open to the ListOfSomething page. Each list has a LoadedPageNumber attribute which I need to persist. Otherwise users always end up on page 1 when they refresh. Bob might have loaded browser window 1 and pointed it to page 5 and then loaded browser window 2 and pointed it to page 14. If I just store the attribute based on session id, Bob will get page 14 in window 1 if he refreshes it.

Note that my state variables are actually much more complex than this simple example and my inability to persist them could lead to big problems (weaknesses in my app).

I need some kind of browser window id or something. It of course needs to be a cross-browser solution (IE6+, Wekbit?+, FF2+)

Any ideas?

Note on relevance: Keep in mind that this is useful also for the case where you're mixing older forms based pages with newer AJAX enabled items. Sometimes you need to postback the forms and you don't want to loose some client side state values.

Answer 1

It's a long time ago, but the answer of Roy Rico helped me today, so I want to share my experience. To handle page refresh and page backbutton uses, I am doing it like that:

• Your server checks if the browser sends the GUID with his request (only works with ajax or form submit)
• If it is not there (browser refresh, backbutton) it just sends back a page with a small JavaScript script. This script creates the GUID and puts it into the window.name storage as described above. After that the script creates a form with the GUID as hidden field and submits it to the server. The action attribute uses the same URL as before (window.location.href)

--> Now the server recognizes the GUID and can deliver the content as needed.

Here is my code (the GUID I create on the server for security reasons, the syntax "${gUid} is from freemarker and just inserts the Guid from the server):

<script>
    $(window).load(
        function () {
            if (!window.name.match(/^GUID-/)) {
                window.name = "GUID-" + "${gUid}";
            }
            $('<form action='+window.location.href+' method="POST"><input type="hidden" name="X-GUID" id="X-GUID" value='+window.name+'></form>').appendTo('body').submit();
        }
    );  
</script>

Hope that helps someone

By the way, this technique should only be used on "NON SEO PAGES", because of the need of JavaScript to get the content. But in general SEO pages have no need of identifying the tab session.

Of course nowadays you can make use of the HTML5 session storage, but I don't want to rely on that, because I also need older browser to work well.

Answer 2

What about having your server randomly generate an ID and have that stored in the page (some javascript variable) when it's served? Then just include that ID in the ajax request. It wont' help on a browser refresh, but as long as the user leaves that page in place (and just lets the ajax stuff do its thing) it should work fine.

Answer 3

You can use HTML5 session Storage ,just generate an unique id and set it on the session storage ! what is cool about that each window or tab has its own session storage. for example :

if we run the following on 3 windows:

window 1: sessionStorage.setItem('key' , 'window1');

window 2: sessionStorage.setItem('key' , 'window2');

window 3: sessionStorage.setItem('key' , 'window3');

sessionStorage.getItem('key' ); <<< this will return corresponding value on window!

window 1: sessionStorage.getItem('key' ); returns window 1

window 2: sessionStorage.getItem('key' ); returns window 2

window 3: sessionStorage.getItem('key'); returns window 3

I believe you are trying to save a variable (separately on each tab/window).

sessionStorage works as charm.

The only problem you may face that browser should support HTML 5.

Answer 4

you could set your own window name, the exact syntax escapes me right now, but you can use the current time and session id to create a unique id on window load, then use that id

This would be done the same way you set a name in the javascript window.open() function, (but you can do it to self, instead of new window)

googling shows:

self.window.name = myclass.getUniqueWindowId( thisSession );

UPDATE

Regarding your need to save this from refresh to refresh, i did some tests and it looks to save it from refresh to refresh. Using Firefox 3, on initial load, the window name is blank, and pressing CTRL+R over and over, and the window name was populated. i then commented out the setting the name code and reloaded and it still retained the name.

<script type="text/javascript">

    alert( self.window.name );

    self.window.name = "blah";

</script>

UPDATE

I have to make noticed the comment below on jQuery's 'jquery-session' plugin, which really works and offers way more than what's discussed here.

Although, one should also make it clear that it relies on HTML5's Web Storage, not supported by older IE versions.

Corporate still depends heavily on IE 7 ('and below' here in Brazil).

Based on self.window.name, THE solution for everything non-compliant to HTML5, I offer the following code snippet as a cross-browser solution:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/jscript">
    //----------------------------------------------------------------------
    //-- guarantees that window.name is a GUID, and that it would
    //-- be preserved whilst this window's life cicle
    //----------------------------------------------------------------------
    //-- window.name will be set to "GUID-<SOME_RANDOM_GUID>"
    //----------------------------------------------------------------------

    $(window).load(
        function () {
            //----------------------
            var GUID = function () {
                //------------------
                var S4 = function () {
                    return(
                            Math.floor(
                                    Math.random() * 0x10000 /* 65536 */
                                ).toString(16)
                        );
                };
                //------------------

                return (
                        S4() + S4() + "-" +
                        S4() + "-" +
                        S4() + "-" +
                        S4() + "-" +
                        S4() + S4() + S4()
                    );
            };
            //----------------------

            if (!window.name.match(/^GUID-/)) {
                window.name = "GUID-" + GUID();
            }
        }
    ) //--------------------------------------------------------------------
</script>

I found the GUID function here (for which I proposed some code clean-up).

Answer 5

window.name can be overwritten by custom javascript libraries, datetimepickers etc.

Instead of window.name I suggest you to use the DOM head meta tag to store your id

<html><head><meta id="windowID" content="{YOUR ID}">

After page is loaded, you have to load everything via ajax in that window, then you can attach this ID to every request as a header (or data) value. For example in JQuery with this code:

$(document)
    .ajaxSend(function(event, jqXHR, ajaxOptions) {
        jqXHR.setRequestHeader('windowID',
            document.getElementById('windowID').content);
})

To use this solution, you have to have access to custom header values on server side. For example in Java servlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String windowName = request.getHeader("windowID");

If you store paging, sorting, filtering etc. information on server side as session attribute, you should store them separately attached to the separate window ID-s.