正在保存CSS State Jquery Cookie

Question

我一直在尝试实现一种方法来保存单击每个项目时添加的CSS类。我不知道该怎么做，因为每个项目都有不同的ID。这个想法是用户可以重新访问页面，但仍然可以选择他们的项目。我试着查找其他示例，但大多数只涉及保存body css，而不是id数组。我尝试了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的旧浏览器的回退。

如果使用元素ID作为键创建对象，则可以使用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
});