如何将多个复选框值保存到本地存储？

Question

I'm trying to save multiple check boxes in local storage, see the code below and you get the idea.

What I have tried so far:

$(function () {
var data = localStorage.getItem("favorite");

if (data !== null) {
    $("input[name='favorites']").attr("checked", "checked");
}
});
$("input[name='favorites']").click(function () {

if ($(this).is(":checked")) {
    localStorage.setItem("favorite", $(this).val());
} else {
    localStorage.removeItem("favorite");
}
});

Html

<input type="checkbox" class="faChkRnd" name="favorite1" id="like">
<input type="checkbox" class="faChkRnd" name="favorite2" id="like1">
<input type="checkbox" class="faChkRnd" name="favorite3" id="like2">

Answer 1

Simply serialize them.

$('.faChkRnd').on('click', function() {
    var fav, favs = [];
    $('.faChkRnd').each(function() { // run through each of the checkboxes
        fav = {id: $(this).attr('id'), value: $(this).prop('checked')};
        favs.push(fav);
    }
    localStorage.setItem("favorites", JSON.stringify(favs));
});

They will be saved in a JSON like so:

"[{\"id\": \"like\", \"value\": true},{\"id\": \"like2\", \"value\": true},{\"id\": \"like3\", \"value\": true}]"

Which you can later load:

var favorites = JSON.parse(localStorage.getItem('favorites'));

And loop through to reassign:

for (var i=0; i<favorites.length; i++) {
    $('#' + favorites[i].id ).prop('checked', favorites[i].value);
}

Here's a working fiddle . You can check a box, and refresh to see the values loaded.

Answer 2

That would be less operations with arrays you can do without 'IF'. With every click simply re-save all the selected checkboxes.

$("input[name='favorites']").click(function () {
   var c = [];
   $(this).is(":checked").each(function (i) {
       c.push( $(this).attr('id') );
       localStorage.setItem("favorite", JSON.stringify(c));
   });         
});

To get the value:

var fav = JSON.parse(localStorage.getItem("favorite"));

Answer 3

We have two cases here

Case 1 :

Want to store checkbox values for elements with different names here is an example for this scenario :

<input type="checkbox" class="faChkRnd" name="favorite1" id="like" value="val1">
<input type="checkbox" class="faChkRnd" name="favorite2" id="like1" value="val2">
<input type="checkbox" class="faChkRnd" name="favorite3" id="like2" value="val3">

here all the checkboxs have a name that starts with favorite , so we can reference them using this information and then store each checkbox name with its appropriate value as a separate item in the localStorage Here is the JS code:

$("input[name*='favorite']").change(function () {
    var name = $(this).attr('name'),
        value = $(this).val();

    localStorage.setItem(name,value);
    console.log(localStorage.getItem(name));        
});

Case 2 :

We want to reference multiple checkboxs with the same name . First we change the value of the name attribute as it is shown in the following :

<input type="checkbox" class="faChkRnd" name="favorite" id="like" value="val1">
<input type="checkbox" class="faChkRnd" name="favorite" id="like1" value="val2">
<input type="checkbox" class="faChkRnd" name="favorite" id="like2" value="val3">

Second we get the data like we've done before but the special thing this time is that the eventListener is fired when each element with that name change the checked property, so the value is generated again with the proper value and it is an array that is for sure because we have multiple values
Now the last trick is to convert that array of values into a string, using the awesomeness of the JSON object like this :

var valueStringified = JSON.stringify(value);

OR simple enough use your own delimiter to join the array values, for example :

var valueStringified  = value.join(',');

Now store it to your localStorage as one string

localStorage.setItem('favorite',valueStringified);

And when you want to retrieve the value of the element, it is very simple just get the item name localStorage.getItem('favorite') and then split it to get an array using the previous delimiter, something like that :

var values = localStorage.getItem('favorite').split(',');

Finally that's it

Here is a jsfiddle example

Hope this helps.