使用 JQuery 从本地存储中获取复选框 id答案

【问题标题】：Getting checkbox id out of local storage for with JQuery使用 JQuery 从本地存储中获取复选框 id
【发布时间】：2017-01-30 17:22:57
【问题描述】：

我正在处理重新加载时必须保存并显示标记的复选框的表单，我编写了可以将其保存到本地存储中的代码，但现在我不知道如何从本地存储中获取复选框的 ID，以便在重新加载页面时再次检查它们。

这是JSFiddle

代码：

// this code saves the marked checkbox in the local storage

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="required-option" id="like1" />
<input type="checkbox" class="required-option" id="like2" />
<input type="checkbox" class="required-option" id="like3" />
<input type="checkbox" class="required-option" id="like4" />
<input type="checkbox" class="required-option" id="like5" />
<input type="checkbox" class="required-option" id="like6" />
<input type="checkbox" class="required-option" id="like7" />
<input type="checkbox" class="required-option" id="like8" />
<input type="checkbox" class="required-option" id="like9" />

【问题讨论】：

标签： jquery forms checkbox local-storage

【解决方案1】：

您只能存储选中复选框的 ID，在此示例中，我存储了 # 前缀的串联选择器字符串。

var elems = $('.required-option');
elems.on('click', function() {
    //Iterate checked checkboxes and store selector like #xxx
    var checkedCheckboxes = elems.filter(':checked').map(function() {
        return '#' + this.id;
    }).get().join(',');
    localStorage.setItem("checkedCheckboxes", checkedCheckboxes);
});

var checkedCheckboxesselector = localStorage.getItem("checkedCheckboxes");
if (!!checkedCheckboxesselector) {
    $(checkedCheckboxesselector).prop('checked', true);
}

Updated fiddle

【讨论】：

【解决方案2】：

使用localStorage.getItem() 获取项目并使用JSON.parse() 将字符串解析为页面准备好的文档上的js对象（在我们的例子中是数组）

$.each(JSON.parse(localStorage.getItem("checkbox")),function(i,v){
$('#'+v).attr('checked','checked'); //or as stated in the comments .prop('checked', true)
});

【讨论】：

最好.prop('checked', true) 因为attr() 不适用于复选框或单选按钮
请您提供索赔文件@MarcosPérezGude
阅读这里：api.jquery.com/attr/#attr-attributeName 从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回 undefined。要检索和更改 DOM 属性，例如表单元素的选中、选择或禁用状态，请使用 .prop() 方法。
这是一个广泛而古老的话题。如果要在 DOM 树上动态管理属性，则必须使用 prop() 而不是 attr()。实际上，您可以在 stackoverflow 上找到大量 OP 使用 attr() 并且不适用于复选框或单选按钮的问题，解决方案已更改为 prop()。文档海量，google一下，不难找到。
这里有最好的解释文章：desarrolloweb.com/articulos/metodo-prop-attr.html。它是西班牙语，但你可以用谷歌翻译它。

【解决方案3】：

实现此目的的更简单方法是仅存储选中框的id 属性。存储未选择的项目有点多余。试试这个：

$('.required-option').on('click', function() {
    var favs = $('.required-option:checked').map(function() {
        return this.id;
    }).get();
    localStorage.setItem("checkbox", JSON.stringify(favs));
})

JSON.parse(localStorage.getItem("checkbox") || '[]').forEach(function(id) {
    $('#' + id).prop('checked', true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="required-option" id="like1" />
<input type="checkbox" class="required-option" id="like2" />
<input type="checkbox" class="required-option" id="like3" />
<input type="checkbox" class="required-option" id="like4" />
<input type="checkbox" class="required-option" id="like5" />
<input type="checkbox" class="required-option" id="like6" />
<input type="checkbox" class="required-option" id="like7" />
<input type="checkbox" class="required-option" id="like8" />
<input type="checkbox" class="required-option" id="like9" />

Updated fiddle

【讨论】：