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);  
            });

Yes, I was thinking of like storing them in an array. Then maybe on the page load, it will check if there are cookies, and load them. — jb8893
– jb8893, Commented Dec 7, 2013 at 20:17

charlietfl · Accepted Answer · 2013-12-07 20:38:29Z

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*/
}

edited Dec 7, 2013 at 20:38

answered Dec 7, 2013 at 20:19

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jb8893 Over a year ago

Thanks, definitely think this is the best way to go about it. I'll post updated code soon.

Jimmie Johansson · Accepted Answer · 2013-12-07 20:10:52Z

0

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
});

answered Dec 7, 2013 at 20:10

Jimmie Johansson

1,9821 gold badge20 silver badges40 bronze badges

1 Comment

jb8893 Over a year ago

Not sure how I would implement it with that, I updated the working code above without the cookies to show exactly how it works. Would I need to store them in a list, and then iterate over them on a page load?

Collectives™ on Stack Overflow

Saving CSS State Jquery Cookie

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related