Question

I am using JQuery as a layout switch which works fine, but when the user refreshes the page none of the layout options are ‘saved’ if you know what I mean. Is there a way to remember which switch option is selected even if user refreshes/changes page?

For example, if the post-area bg is black and text white, the switch will invert those colours, and will stay unless the user switches back.

I used to do this with php, but I want to do this without php, just jq if somehow possible.

Answer 1

You will definitely need to set a cookie for this if you want to do it with jQuery (or store local data using HTML5 but that is not as universally used or browser accepted, nor needed).

This is a pretty basic function to set a cookie, from here:

function set_cookie(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;
}

and this is a pretty basic one to get a cookie, also from here:

function get_cookie(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 something like this should work:

var bg_color = get_cookie('bg_color');
if (bg_color != null) { // may want to do more verification here, as well
    $('body').css('backgroundColor', '#' + bg_color);
}
else {
    $('body').css('backgroundColor', '#FFF');
}

and then whenever you want to save the color, just set it like:

set_cookie('bg_color', color, 10); // will save `color` in the cookie for 10 days

EDIT After posting this it occurred to me there is probably a built in function with jQuery to set/get cookies or at least a very good plugin. This page has some good references.