「記住」的點擊div樣式（設置一個cookie） - jquery和jquery cookie插件

Question

我有一組div與mouseenter，mouseleave和點擊事件。

var originalAttributes = $('.aaa').attr('style'); 
$('.aaa').mouseenter(function() { 
    $(this).css('background', '#aaaaaa'); 
    $(this).css('border', 'solid 1px red'); 
}); 
$('.aaa').mouseleave(function() { 
    $(this).css('background','blue'); 
}); 
$('.aaa').click(function() { 
    var $this = $(this); 
    update_x1(this); 
    $this.off('mouseenter mouseleave'); 
}); 
$('#save').click(function() { 
    $.cookie({ expires: 30 }); 
}); 
$('#clear').click(function() { 
    $('.aaa').attr('style',originalAttributes); 
}); 

http://jsfiddle.net/z8KuE/24/

如何「拯救」和「清除」功能，可以在這個功能和使用jQuery插件的cookie的使用可以實現嗎？

點擊「保存」應該「記住」div的當前樣式，點擊「清除」應該將樣式重置爲原始並清除cookie（或重寫）。

編輯：由西蒙·Rachlenko解決 - http://jsfiddle.net/z8KuE/31/

Answer 1

這裏是保存和清除按鈕的代碼：

$('#save').click(function() { 
    $('.aaa').each(function(){ 
     var d = $(this), 
     id = d.attr('id'), 
     style = d.attr('style'); 
     if (style != originalAttributes){ //style changed 
      $.cookie('aaaStyle' + id, style, { expires: 30 }); 
     } 
    }); 

}); 
var originalAttributes = "position: relative; left: 50px; top: 30px; width: 300px; height: 50px; background: #222222"; 
$('#clear').click(function() { 
    // unset changes 
    $('.aaa').attr('style',originalAttributes); 
}); 

見fiddle