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

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

jQuery($ => {
  var arr = JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach((c, i) => $('.box').eq(i).prop('checked', c));

  $(".box").click(() => {  
    var arr = $('.box').map((i, el) => el.checked).get();
    localStorage.setItem("checked", JSON.stringify(arr));
  });
});

Working example

Answer 2

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


    function onReady() {

        let checked1 = "true" == localStorage.getItem("checked1");
        let checked2 = "true" == localStorage.getItem("checked2");
        let checked3 = "true" == localStorage.getItem("checked3");
        $("#box-1").prop('checked', checked1);
        $("#box-2").prop('checked', checked2);
        $("#box-3").prop('checked', checked3);

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

    }

    $(document).ready(onReady);

当然，您可以通过以下方法进一步简化

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

    function onReady() {
        [1, 2, 3].forEach( function(boxNumber) { 
          $("#box-" + boxNumber).prop(
            'checked', 
            localStorage.getItem("checked" + boxNumber)
          );
          $("#box-" + boxNumber).click( function() {
            localStorage.setItem(
              "checked" + boxNumber,  
              $("#box-" + boxNumber).is(":checked")
            );
          });
        })
    }

    $(document).ready(onReady);

Answer 3

您的check变量正在被覆盖，您可以将其放入for循环中。所以你的代码变成，

function onClickBox() {
 for(var i=1;i<=3;i++){
       let checked=$("#box-"+i).is(":checked");
       localStorage.setItem("checked-"+i, checked);
    }
 }


function onReady() {
   for(var i=1;i<=3;i++){
     if(localStorage.getItem("checked-"+i)=="true"){
      var checked=true;
     }
     else{
      var checked=false;
     }
    $("#box-"+i).prop('checked', checked);
    onClickBox();
   }
}

$(document).ready(onReady);