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

Question

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

到目前为止我已经尝试过:

$(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

简单地序列化它们。

$('.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 中:

"[{\"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);
}

这是一个 working fiddle .您可以选中一个框，然后刷新以查看加载的值。