在本地存储中存储多个复选框输入

Question

我有多个复选框输入,如下所示:

<input type="checkbox" id="box-1">
<input type="checkbox" id="box-2">
<input type="checkbox" id="box-3">

我想将它们的值(已选中或未选中)存储在浏览器的本地存储中.

我用来做这个的javascript是:

function onClickBox() {
  let checked = $("#box-1").is(":checked");
  let checked = $("#box-2").is(":checked");
  let checked = $("#box-3").is(":checked");
  localStorage.setItem("checked", checked);
}

function onReady() {
  let checked = "true" == localStorage.getItem("checked");
  $("#box-1").prop('checked', checked);
  $("#box-2").prop('checked', checked);
  $("#box-3").prop('checked', checked);

  $("#box-1").click(onClickBox);
  $("#box-2").click(onClickBox);
  $("#box-3").click(onClickBox);
}

$(document).ready(onReady);

第一部分在单击时保存复选框的状态,第二部分在页面刷新时加载它.

如果删除了第2行和第3行的行,这很有效,但我需要它来处理所有复选框.

Answer 1

这里的主要问题是你只在localStorage中存储一个值,checked每次检查一个不同的框时都会被覆盖.您需要存储所有框的状态.数组是理想的,但localStorage只能保存字符串,因此当您尝试读取或保存数据时,需要序列化/反序列化数据.

您还可以通过在其上放置一个公共类并使用map()构建上述数组来简化检索框值的逻辑.试试这个:

<input type="checkbox" id="box-1" class="box" />
<input type="checkbox" id="box-2" class="box" />
<input type="checkbox" id="box-3" class="box" />

function onClickBox() {
    var arr = $('.box').map(function() {
    return this.checked;
  }).get();
  localStorage.setItem("checked", JSON.stringify(arr));
}

$(document).ready(function() {
    var arr = JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
    $('.box').eq(i).prop('checked', checked);
  });

  $(".box").click(onClickBox);
});

工作实例