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

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).