Запоминание стиля кнопок bootstrap 3 в cookie
 

Всем привет!
Уже голову сломал себя, что только не пробовал, никак не могу прикрутить скрипт для запоминания состояния кнопок.Через сторож тоже пробовал.
http://308712.motoya.web.hosting-test.net/

Кнопки слева "В наличии и под заказ" где каталог товаров.


Вот так они меняются:

<script type="text/javascript">
        $(".all").click(function(){
            $(this).removeClass("btn-xs");
	   $(this).addClass("btn-md");
            $(this).css("font-size","10pt");
            $(".ok").removeClass("btn-md");
            $(".ok").addClass("btn-xs");
            $(".ok").css("font-size","8pt");
        })
        $(".ok").click(function(){
            $(this).removeClass("btn-xs");
            $(this).addClass("btn-md");
            $(this).css("font-size","10pt");
          	$(".all").removeClass("btn-md");
            $(".all").addClass("btn-xs");
            $(".all").css("font-size","8pt");
        })
</script>

После обновления страници кнопки естественно принимают свой первоначальный стиль.

Может у кого есть идеи?

Идеи тут стандартные...
При изменении состояния, записывать нужную информацию о том состоянии...
А при загрузке документа прочитать информацию о состоянии и восстановить оное...

Я так и делал, оказалось у меня в кукие тупо не записывалось, друг с другом скрипты мозги парят, буду пробовать заново....

Блин я уже упростил как мог все равно не получается.Хочу хоть цвет блока чтоб запоминалось.Смотрю через алерт все записывает,в веб инспекторе тоже. Видимо я не могу достать из куки информацию, не так читаю ее что ли.

.all{
        height: 50px;
        width: 70;
        background: #b17902;
     }

<div class="all"></div>

<script type="text/javascript">

    $(".all").click(function(){
        $(".all").css("background" , "#009900");
        var color = $(".all").css('background');
        $.cookie(".all", color);
        alert('Записано :'+color);
        if($.cookie(".all")) {
            var al = $.cookie(".all");
            $(".all").css({
                'background': al
            })
        }
    })
</script>

Че спецом деда нанимал, чтоб он состояния кнопок сторожил? =D

<div class="all">all</div>

fucntion set(value) {
 $.cookie('myCoolie',value);
}

function get(name) {
return $.cookie('name');
}

$(".all").click(function(){
  set('myColor','grey');
  $(this).css({
    background:get('myColor');
  })

})

Вообще кнопка не меняется,ошибки в скрипте исправил, но все равно спасибо).Наверное надо допелить немного скрипт.

Так выведи на экран то, что ты читаешь...

Не чего не выводит, буду разбираться дальше.

Вот и ответ...

Вот еще не пойму если я записываю один CSS стиль то все работает.

<script type="text/javascript">

$(".all").click(function(){
    $(this).css("background" , "#009900");
    var color = $(".all").css('background');
    $.cookie(".all",color);
    alert('Записано :'+color);

});

if($.cookie(".all")) {
    var al = $.cookie(".all");
    $('.all').css({
              'background': al
})
</script

А если начинаю записывать хотя бы еще один , то скрипт перестает возвращать данные из куки

$(".all").click(function(){
    $(this).css("background" , "#009900");
    $(this).css("height" , "60px");
    var color = $(".all").css('background');
    var height = $(".all").css('height');
    var arrCoHe = color+ "," +height; 
    $.cookie(".all", arrCoHe);
    alert('Записано :'+arrCoHe);
});

if($.cookie(".all")) {
    var al = $.cookie(".all");
    var arrCoHe = al.split(",");
    $('.all').css({
              'background': arrCoHe[0],
              'height': arrCoHe[1]
    })
}