如何将多个复选框值保存到本地存储? [英] How to save multiple checkbox values to local storage?

问题描述

我正在尝试在本地存储中保存多个复选框，请参见下面的代码，您就会明白.

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">

推荐答案

只需序列化它们即可.

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

它们将像这样保存在JSON中:

They will be saved in a JSON like so:

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

稍后可以加载:

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

并循环进行重新分配:

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.

这篇关于如何将多个复选框值保存到本地存储?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！