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

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。您可以选中一个框，然后刷新以查看加载的值。

Answer 2

如果没有 'IF'，你可以对数组进行更少的操作。 每次点击只需重新保存所有选中的复选框。

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

获取值：

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

Answer 3

我们这里有两个案例

案例 1：

想要为具有不同名称的元素存储复选框值 这是此场景的示例：

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

这里所有复选框的名称都以favorite 开头，因此我们可以使用此信息引用它们，然后将每个复选框名称及其适当的值作为单独的项目存储在localStorage 中 这是JS代码：

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

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

案例 2：

我们希望引用多个具有同名的复选框。 首先我们更改 name 属性的值，如下所示：

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

第二次我们像以前一样获取数据，但这次特别的是eventListener会在每个具有该名称的元素更改选中的属性时被触发，因此该值会以正确的值再次生成，并且这是一个数组，因为我们有多个值
现在最后一个技巧是使用 JSON 对象的强大功能将值数组转换为字符串，如下所示：

var valueStringified = JSON.stringify(value);

或很简单，使用您自己的分隔符来连接数组值，例如：

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

现在将其作为一个字符串

存储到您的 localStorage

localStorage.setItem('favorite',valueStringified);

而当你想检索元素的值时，很简单，只需获取项目名称localStorage.getItem('favorite')，然后拆分它以使用之前的分隔符得到一个数组，类似这样：

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

终于完成了

Here is a jsfiddle example

希望这会有所帮助。