Сохранение CSS State JQuery Cookie

Question

Я пытался реализовать способ сохранения класса CSS, который добавляется при щелчке по каждому элементу. Я не уверен, как это сделать, поскольку каждый элемент имеет другой идентификатор. Эта идея заключается в том, что пользователь может вернуться к странице и все еще иметь свои элементы. Я попытался найти другие примеры, но большинство из них касалось только экономии тела css, а не массива идентификаторов. Я пытался с JQuery Cookie, но безрезультатно, любая помощь была бы весьма признательна.

$('.select_it, .myState').on('click', function(e) { 
       var id = $(this).attr('id'); 
       isRadio = $(this).data('status'); 


       if(isRadio) { 
        if ($(this).hasClass('myState')) { 
         $(this).removeClass('myState'); 
        } else { 
         $('.select_it').removeClass('myState'); 
         $(this).addClass('myState'); 
        } 

        $('.nextbutton').fadeTo("slow", 1.0, function() { 
        }); 

        jsRoutes.controllers.Builder.selectedOption(id).ajax({ 
         success : function(data) { 
         } 
        }); 
       } else { 
        $('.nextbutton').fadeTo("slow", 1.0, function() { 

        }); 
        $(this).toggleClass('myState'); 

        jsRoutes.controllers.Builder.selectedOption(id).ajax({ 
         success : function(data) { 
         } 
        }); 
       } 
      }); 

Решение:

var state = {}; 
      $('.nextbutton').click(function() {return false;}); 
      if (localStorage.getItem("state") === null) { 
       // 
      } else { 
       $('.nextbutton').fadeTo("slow", 1.0, function() { 
        $('.nextbutton').unbind('click'); 
       }); 
       state = JSON.parse(localStorage["state"]); 
      } 


      $('.select_it, .myState').each(function(i, obj) { 
       if(state[obj.id] == 'myState') { 
        $(this).addClass('myState'); 
       } 
      }); 

      $('.select_it, .myState').on('click', function(e) { 
       var id = $(this).attr('id'); 
       isRadio = $(this).data('status') 

       if(isRadio) { 

        $('.nextbutton').fadeTo("slow", 1.0, function() { 
         $('.nextbutton').unbind('click'); 
        }); 


        $('.myState').each(function(index, element){ 
         $(this).removeClass('myState'); 
         $(this).addClass('select_it'); 
         state[element.id]='select_it'; 
        }); 

        $(this).addClass('myState'); 
        state[id]='myState'; 

        jsRoutes.controllers.Builder.selectedOption(id).ajax({success : function(data) {}}); 

       } else { 

        if ($(this).hasClass('select_it')) { // TOGGLE ON 
         state[id]='myState'; 
         $(this).removeClass('select_it'); 
         $(this).addClass('myState'); 
        } else {        // TOGGLE OFF 
         state[id]='select_it'; 
         $(this).removeClass('myState'); 
         $(this).addClass('select_it'); 
        } 
        jsRoutes.controllers.Builder.selectedOption(id).ajax({success : function(data) {}}); 
       } 

       localStorage['state'] = JSON.stringify(state); 
      }); 

Answer 1

Cookie может хранить только строки. Я также хотел бы использовать localStorage, а не cookie ... и использовать cookie как резерв для старых браузеров, которые не поддерживают localStorage.

Если вы создаете объект с помощью идентификаторов элементов в качестве ключей, вы можете использовать JSON.stringify для создания строки для хранения и использования JSON.parse для преобразования строки в объект снова.

/* example populated object, only need an empty object to start*/ 
var ui_state={ 
    ID_1:'someClass', 
    ID_2:'inactiveClass' 
} 

Тогда обработчиков событий:

$('#ID_1').click(function(){ 
    var newClass= /* logic to dtermine new class*/ 
    $(this).addClass(newClass);   
    storeStateToLocal(this.id, newClass); 
}); 
/* simplified store method*/ 
function storeStateToLocal(element_id, newClass){ 
    ui_state[element_id]= newClass;/* update ui_state object*/ 
    if(window.locaStorage != undefined){ 
      localStorage.setItem('ui_state', JSON.stringify(ui_state)); 
    }else{ 
     /* stringify to cookie*/ 
    }   
} 

На странице загрузки можно перебрать объекта:

var ui_state= getStateFromLocal();/* if none in storage, return false*/ 
if(ui_state){ 
    $.each(ui_state,function(element_id, currClass){ 
     $('#'+element_id).addClass(currClass); 
    }); 
}else{ 
    ui_state={};/* create empty object if none already in storage*/ 
} 

Answer 2

Хмм не 100% уверен, но это что-то вроде этого, что вы хотите?

$('.select_it').each(function(){ 
    if ($(this).attr('id') != $.cookie(cookieName)) { 
     $(this).removeClass('myState'); 
    } else { 
     $(this).addClass('myState'); 
    } 
}); 

Или, может быть, больше, как это:

$('.select_it, .myState').on('click', function(e) { 
    $('.select_it').removeClass('myState'); 
    $(this).addClass('myState'); 

    // more code 
});