使用 angular 中的本地存储来存储选中的复选框

Question

我有一个可以通过复选框排序的列表。我编写了一个小脚本来存储检查值，以便在刷新过滤列表时显示相同的项目，就像它们在离开页面之前所做的那样。

目前，当我刷新时，它会选中我所有的复选框，而不仅仅是我选中的那个。

我的输入是这样设置的：

<input type="checkbox" name="filters" ng-click="includeBrand('Brand A')" />Brand A

这是我的函数，应该检查相同的函数：

$(function () {
    var data = localStorage.getItem("filter-by");

    if (data !== null) {
        $("input[name='filters']").attr("checked", "checked");
    }


});



$("input[name='filters']").click(function () {

    if ($(this).is(":checked")) {
        localStorage.setItem("filter-by", $(this).val());
    } else {
        localStorage.removeItem("filters");
    }

});

检查 "all of the above" 可能出了什么问题？

感谢您的帮助！

Answer 1

更新回复

您的代码笔中发生了一些事情。这是我的建议：

首先，添加一个data-属性，像这样：

<input type="checkbox" name="filters" data-filter-by="Brand A" ng-click="includeBrand('Brand A')" />Brand A

将您的点击处理程序更新为更像这样：

$("input[name='filters']").click(function () {
  var items = localStorage.getItem("filter-by");
  items = items ? JSON.parse(items) : [];

 var data = $(this).data('filter-by');
 var index = items.indexOf(data);

  if ($(this).is(":checked")) {
    items.push(data);
  } else if (index >= 0) {
    items.splice(index, 1);
  }

  localStorage.setItem("filter-by", JSON.stringify(items));
});

最后，将预先 select 复选框的代码更新为更像这样的代码：

$(function () {
  var items = localStorage.getItem("filter-by");
  items = items ? JSON.parse(items) : [];

  $("input[name='filters']").each(function(index, input) {
    var data = $(input).data('filter-by');
    if (items.indexOf(data) >= 0) {
      $(input).attr('checked', 'checked');
    }
  });
});

这有意义吗？

原回复

这一行...

$("input[name='filters']").attr("checked", "checked");

检查所有名为 "filters" 的输入 - 而不仅仅是单个输入。我怀疑您 的意思是 要做的是遍历您的过滤器复选框，并且仅 select 那些 val() 值与存储在本地存储中的项目相匹配的复选框。所以像这样...

$("input[name='filters']").each(function(index, input) {
  if ($(input).val() === data) {
    $(input).attr('checked', 'checked');
  }
});

我还应该指出，您在一处写入 filter-by，并在下面的两行中删除了 filters。这些应该是相同的密钥。

使用 angular 中的本地存储来存储选中的复选框

Using local storage in angular to store which checkboxes were checked

javascript

checkbox

local-storage

angularjs

angular-local-storage