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

其次我们得到的数据就像我们之前所做的那样，但这次特殊的事情是当具有该名称的每个元素更改checked属性时会触发eventListener，因此再次生成值正确的值，它是一个数组是肯定的，因为我们有多个值
现在最后一个技巧是将这个值数组转换为字符串，使用 JSON 对象的强大功能，如下所示：

var valueStringified = JSON.stringify(value);

OR 使用您自己的分隔符来加入数组值，例如：

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

现在将其作为一个字符串

存储到localStorage

localStorage.setItem('favorite',valueStringified);

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

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

最后是

Here is a jsfiddle example

希望这有帮助。

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

3 个答案: