"remember" div's style on click (set a cookie) - jquery and jquery cookie plugin

Question

I have a group of divs with mouseenter, mouseleave and click events.

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/

How "save" and "clear" functionality can be achieved in this function and with the usage of jquery cookie plugin?

Click on "save" should "remember" the div's current style, and click on "clear" should reset the style to original and clear the cookie (or re-write).

edit: solved by Shimon Rachlenko - http://jsfiddle.net/z8KuE/31/

Answer 1

Here is the code for save and clear buttons:

$('#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);
});

See fiddle