0
我有一个页面上的内容列表,供用户在定向过程中完成。当他们完成每个,我希望他们能够检查一个盒子,这将通过localStorage保存,所以当他们回来时,仍然检查相同的盒子。我已经完成了这个..但随着我的列表增长,我的HTML会变得非常大,以我的方式。有没有更好的方法来做到这一点?我不想使用cookie。 基本上看看是否有办法让它检查页面上所有复选框的状态,而不是每次都复制代码并更改'box#'。这里是我使用的HTML:HTML5 localStorage复选框 - 如何加载多个框
<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>
然后使用foreach循环来迭代所有复选框,并将其设置为检查JSON数组的索引中的项是否为真。 –