Question

我有一个列表，列在一个页面上，供用户在定位时完成。当他们完成每个，我希望他们能够检查一个盒子，它将通过localStorage保存，所以当他们回来时仍然会检查相同的盒子。我已经完成了这个......但是随着我的列表的增长，我的HTML会变得非常大，就像我一样。有没有更好的方法来做到这一点？我不想使用cookies。 基本上是想查看是否有办法检查页面上所有复选框的状态，而不是一遍又一遍地复制代码并更改“＆＃39;框＃＆＃39;每一次。以下是我使用的HTML：

 <html>
<head>
  <script type="text/javascript" src="MooTools-Core-1.6.0.js"></script>

  <style type="text/css">

  </style>

  <title></title>

<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
    setStatus = document.getElementById('box1');
    setStatus.onclick = function() {
        if(document.getElementById('box1').checked) {
            localStorage.setItem('box1', "true");
        } else {
            localStorage.setItem('box1', "false");
        }
    }


getStstus = localStorage.getItem('box1');
    if (getStstus == "true") {

        document.getElementById("box1").checked = true;
    } else {
    }
});//]]> 
</script>
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
    setStatus = document.getElementById('box2');
    setStatus.onclick = function() {
        if(document.getElementById('box2').checked) {
            localStorage.setItem('box2', "true");
        } else {
            localStorage.setItem('box2', "false");
        }
    }


getStstus = localStorage.getItem('box2');
    if (getStstus == "true") {

        document.getElementById("box2").checked = true;
    } else {
    }
});//]]> 
</script>
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
    setStatus = document.getElementById('box3');
    setStatus.onclick = function() {
        if(document.getElementById('box3').checked) {
            localStorage.setItem('box3', "true");
        } else {
            localStorage.setItem('box3', "false");
        }
    }


getStstus = localStorage.getItem('box3');
    if (getStstus == "true") {

        document.getElementById("box3").checked = true;
    } else {
    }
});//]]> 
</script>
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
    setStatus = document.getElementById('box4');
    setStatus.onclick = function() {
        if(document.getElementById('box4').checked) {
            localStorage.setItem('box4', "true");
        } else {
            localStorage.setItem('box4', "false");
        }
    }


getStstus = localStorage.getItem('box4');
    if (getStstus == "true") {

        document.getElementById("box4").checked = true;
    } else {
    }
});//]]> 
</script>
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
    setStatus = document.getElementById('box5');
    setStatus.onclick = function() {
        if(document.getElementById('box5').checked) {
            localStorage.setItem('box5', "true");
        } else {
            localStorage.setItem('box5', "false");
        }
    }


getStstus = localStorage.getItem('box5');
    if (getStstus == "true") {

        document.getElementById("box5").checked = true;
    } else {
    }
});//]]> 
</script>


</head>

<body>
  <input type="checkbox" id="box1" />Item 1<Br>
  <input type="checkbox" id="box2" />Item 2<Br>
  <input type="checkbox" id="box3" />Item 3<Br>
  <input type="checkbox" id="box4" />Item 4<Br>
  <input type="checkbox" id="box5" />Item 5<Br>

</body>

</html>

Answer 1

使用json格式保存＆amp;加载对象：

var boxes = {
    box1: true,
    box2: false,
    box3: false,
    box4: false,
    box5: false,
    .
    .
    .
};

保存：

localStorage.setItem('boxes', JSON.stringify(boxes));

再次加载并使用：

var boxes = JSON.parse(localStorage.getItem('boxes'));

HTML5 localStorage复选框 - 如何加载多个框

1 个答案: