HTML5 localStorage複選框 - 如何加載多個框

我有一個頁面上的內容列表，供用戶在定向過程中完成。當他們完成每個，我希望他們能夠檢查一個盒子，這將通過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>

來源

2016-02-28 Glenn

使用JSON格式保存&負載對象：

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

來源

2016-02-28 18:26:25 MBN

然後使用foreach循環來迭代所有複選框，並將其設置爲檢查JSON數組的索引中的項是否爲真。 –

HTML5 localStorage複選框 - 如何加載多個框

回答

相關問題