Saving CSS State Jquery Cookie

Question

I've been trying to implement a way to save the CSS class that gets added on click to each item. I'm not sure how to go about it since each item has a different ID. That idea is that a user can revisit a page, and still have their items selected. I tried looking up other examples, but most only involved saving the body css and not an array of ids. I tried with Jquery Cookie but to no avail, any help would be greatly appreciated.

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

Solution:

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 can only store a string. I would also consider using localStorage rather than cookie...and use cookie as fallback for older browsers that don't support localStorage.

If you create an object using element ID's as keys, you can use JSON.stringify to create string to store and use JSON.parse to convert string to object again.

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

Then within event handlers:

$('#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*/
    }        
}

On page load can iterate over the object:

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

Hmm not 100% sure, but is it something like this what you want?

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

Or maybe more like this:

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

    // more code
});