css styles set by jquery lost after back button

Question

A simple script displays a color palette. I use jQuery.ready to init it. When I click on a color, the script just changes the class of the clicked box so that a checkbox appears on it. It also puts the color value in a hidden field.

Now I click in the navbar to go to another page, then hit the back button. The value in the hidden field is still here. But the color box is not checked anymore (firebug confirmed that the class is not here anymore).

What can I do to ensure that the class set dynamically by jquery is still here when going back to the page?

(I tried this in latest FF and IE)

Answer 1

You can't rely on the browser to maintain your website state. When you use the back button and the hidden field value is still there consider that an extra, you might not get the same behavior with other browsers.

This means you have to save and maintain the website state yourself. If you used ajax to navigate your website you could easily maintain the state using an object, but since that's not the case, a solution might be to use cookies.

EDIT: HTML5 Web Storage can also be an alternative solution, same logic applies.

Following code by W3Schools, taken from http://www.w3schools.com/js/js_cookies.asp

To set a cookie

function setCookie(c_name,value,exdays)
{
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

To get cookie value

function getCookie(c_name)
{
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x==c_name)
        {
            return unescape(y);
        }
    }
}

So you'd basically set a cookie when the user chooses a color (using setCookie()), and every time the page loads you check for the cookie value (using getCookie()) and populate the page accordingly.

Example

//User has chosen a color, save that in a cookie for 1 day
setCookie("selectedColor", "green", 1);

//Page is loaded, check for cookie value...
$(document).ready(function()
{
    //Get cookie value
    var selectedColor = getCookie("selectedColor");
    if(selectedColor != "")
    {
        //A color has been previously selected, add the CSS class accordingly
        $("#"+selectedColor).addClass("selected");
    }
});

EDIT: To keep the state only when coming from another site (not only just hitting the back button). Reloading clears everything.

Let's assume the user sets the color in page1.html, then goes to page2.html and then comes back to page1.html.

In page1.html save the selected color value in a cookie, the same as before.

//User has chosen a color, save that in a cookie for 1 day
setCookie("selectedColor", "green", 1);

But now, when page1.html loads, only populate the page with a possible previously selected value if a certain cookie (explained below) is set to true.

//page1 is loaded
$(document).ready(function()
{
    //Only populate page if "populate" cookie is set to true
    if( getCookie("populate") != "true" )
    { return; //Stop }

    //Get cookie value
    var selectedColor = getCookie("selectedColor");
    if(selectedColor != "")
    {
        //A color has been previously selected, add the CSS class accordingly
        $("#"+selectedColor).addClass("selected");

        //Set "populate" cookie to false
        setCookie("populate", "false", 1);
    }
});

Now, in page2.html do this:

//page2 is loaded
$(document).ready(function()
{
    //Set "populate" cookie to true
    setCookie("populate", "true", 1);
}

What this does is enabling you to know if the visitor is coming from another page when they reach page1.html. Keep in mind that if the user does this...

page1.html -> page2.html -> google.com -> page1.html

.. the values will still be there. Reloading page1.html clears everything. Unfortunately I won't be able to provide you with HTML5 Web Storage examples as I've never used it, but applying the same logic will give you similar results.

Hope this helps.