jquery toggle function and set a cookie

Question

I have the following function which toggles mouseenter and mouseleave on click:

var flag = true;
$('.aaa').mouseenter(function () {
    if(flag) {
    $(this).css('background', '#aaaaaa');
    }
    $(this).css('border', 'solid 1px red');
});
$('.aaa').mouseleave(function () {
    if(flag) {
    $(this).css('background','blue');
    }
    $(this).css('border', 'solid transparent 1px');
});
$('#tog').click(function () {
    flag = !flag;
});

http://jsfiddle.net/z8KuE/15/

How can chosen preference be "remembered" and loaded on the next page load?

edit: in case that the solution from bellow doesn't work on the site for some reason, just put it here:

 (function($){
    $(document).ready(function(){
       //Scripts go in here!
    });
 })(jQuery);

Answer 1

I would use the jQuery cookie plugin:

var storedFlag = $.cookie('userSelection'); // read cookie
var flag = 1;  //default value
if(storedFlag != undefined){   // some flag was stored
    flag = storedFlag;
}
$('.aaa').mouseenter(function () {
    if(flag > 0) {
        $(this).css('background', '#aaaaaa');
    }
    $(this).css('border', 'solid 1px red');
});
$('.aaa').mouseleave(function () {
    if(flag > 0) {
        $(this).css('background','blue');
    }
    $(this).css('border', 'solid transparent 1px');
});
$('#tog').click(function () {
    flag = 1 - flag;
    $.cookie('userSelection', flag, { expires: 30 }); // store cookie
});

The problem is that the boolean values are stored as strings, and the string 'false' is a true value, thus i resorted to using numbers and >0 comparison.

See updated fiddle