title: HTML5 localStorage checkboxes - how to load multiple boxes
body: <p>I have a list of things that are going to be on a page for users to complete during an orientation. As they complete each, I'd like them to be able to check a box, which will be saved via localStorage, so when they come back the same boxes are still checked. I've accomplished this.. but as my list grows, my HTML will get pretty large doing it the way I have. Is there a better way to be doing this? I don't want to use cookies. <strong>Basically looking to see if there is a way to have it check the status of all checkboxes on the page, rather than copying the code over and over and changing the 'box#' each time.</strong> Here is the HTML I'm using:</p>
  
  <pre><code> &lt;html&gt;
  &lt;head&gt;
    &lt;script type="text/javascript" src="MooTools-Core-1.6.0.js"&gt;&lt;/script&gt;
  
    &lt;style type="text/css"&gt;
  
    &lt;/style&gt;
  
    &lt;title&gt;&lt;/title&gt;
  
  &lt;script type='text/javascript'&gt;//&lt;![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 {
      }
  });//]]&gt; 
  &lt;/script&gt;
  &lt;script type='text/javascript'&gt;//&lt;![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 {
      }
  });//]]&gt; 
  &lt;/script&gt;
  &lt;script type='text/javascript'&gt;//&lt;![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 {
      }
  });//]]&gt; 
  &lt;/script&gt;
  &lt;script type='text/javascript'&gt;//&lt;![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 {
      }
  });//]]&gt; 
  &lt;/script&gt;
  &lt;script type='text/javascript'&gt;//&lt;![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 {
      }
  });//]]&gt; 
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;input type="checkbox" id="box1" /&gt;Item 1&lt;Br&gt;
    &lt;input type="checkbox" id="box2" /&gt;Item 2&lt;Br&gt;
    &lt;input type="checkbox" id="box3" /&gt;Item 3&lt;Br&gt;
    &lt;input type="checkbox" id="box4" /&gt;Item 4&lt;Br&gt;
    &lt;input type="checkbox" id="box5" /&gt;Item 5&lt;Br&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>