function - jquery切换功能并设置cookie

Question

我有以下功能，可以在点击时切换 mouseenter 和 mouseleave：

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/

选择的偏好如何被“记住”并在下一页加载时加载？

编辑：如果波纹管的解决方案由于某种原因在网站上不起作用，只需将其放在这里：

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

Answer 1

我会使用jQuery cookie 插件：

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
});

问题是布尔值存储为字符串，而字符串'false'是一个真值，因此我求助于使用数字和>0比较。

查看更新的小提琴