Using local storage in angular to store which checkboxes were checked

Question

I have a list that can be sorted through checkboxes. I wrote up a little script that should store the check values so on refresh the filtered list shows the same items, as they did before leaving the page.

Currently when I refresh it checks all of my checkboxes, not just the one I checked.

Here is how my inputs are set up:

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

and here is my function that should keep the same ones checked:

$(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");
    }

});

What could be going wrong as to make it check "all of the above"?

Thanks for the help!

Answer 1

Updated response

There's a couple of things going on in your codepen. Here's my recommendations:

First, add a data- attribute, like so:

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

Update your click-handler to be more like this:

$("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));
});

And lastly, update the code where you pre-select checkboxes to be something more like this:

$(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');
    }
  });
});

Does this make sense?

Original response

This line...

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

Checks all inputs named "filters" - not just individual ones. I suspect what you mean to do is iterate over your filter checkboxes and only select those where the val() value matches the item stored in localstorage. So something like this...

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

I should also point out that you're writing to filter-by in one place and removing filters in 2 lines below. Those should be the same key.