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

【问题标题】：Store multiple checkbox inputs in local storage在本地存储中存储多个复选框输入
【发布时间】：2020-09-01 15:44:46
【问题描述】：

我有多个复选框输入，如下所示：

<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 的行被删除，这很好用，但我需要它与所有复选框一起使用。

【问题讨论】：

您在顶部函数中重新声明了同一个变量 (checked) 三次。如果所有三个复选框都有不同的状态，您将不得不单独存储它们或作为位掩码。

标签： javascript jquery html local-storage

【解决方案1】：

您的主要问题是您只在 localStorage 中存储了一个值，checked，每次您选中不同的框时都会覆盖该值。相反，您需要存储 all 框的状态。数组是理想的选择，但是 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

【讨论】：

如果不能保证下单，可以存储{ id: this.id, state: this.checked }
旁注，这个答案比其他答案的好处是没有被硬编码为仅适用于 3 个元素。它适用于任意数量的元素，只要它们上面有类。

【解决方案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);

【讨论】：

【解决方案3】：

你的检查变量被覆盖了，你可以把它放在 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);

【讨论】：

【解决方案4】：

请遵循以下代码（非常简单的 Javascript 作品）

<input type="checkbox" id="box">checkbox</input>
<button type="button" onClick="save()">save</button>
<script>
function save() {   
    var checkbox = document.getElementById("box");
    localStorage.setItem("box", checkbox.checked);  
}

//for loading...
var checked = JSON.parse(localStorage.getItem("box"));
    document.getElementById("box").checked = checked;
</script>

通过简单的修改，你可以在没有保存按钮的情况下使用它.. 希望这对你有帮助..

【讨论】：