Create jQuery cookie, store css body color value, change page, retrieve cookie and apply body color value to new page

Question

I'm putting together a website where I have a Js button which fades the background body color to black / white (vice versa). I need to store the users choice of background colour and apply it throughout the entire site, from page to page. I understand cookies might be the way forward along with .css()?

I've spend hours today trying to figure this out, and have read countless posts, some here on Stack Overflow but can't get to grips with how to retrieve a cookie value and apply it to my site's body css. Of course, I'm brand new to Js/Query and have just started learning. Very grateful if someone can point me in the right direction, a good tutorial with examples would be a lot of help.

Many thanks.

Answer 1

I've had success with this jQuery cookie plugin.

Usage:

var key = 'my_key';
var value = $.cookie(key);
var new_value = 'my_value';
$.cookie(key,new_value);
$.cookie(key,new_value,options);

Answer 2

Try a jQuery storage plugin: http://www.jstorage.info/

Examples:

$.jStorage.set(key, value)

value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")