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);
});

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

您的检查变量将被覆盖，您可以将其放入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);

Answer 4

请遵循以下代码（非常简单的Java脚本）

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

只需进行简单的修改，就可以使用它而无需保存按钮。希望对您有帮助。

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

4 个答案: