title: Saving Checkbox State In HTML or Javascript
body: <p>I'm trying to design a site (possibly to make into a Chrome extension) that will allow me to mark which characters have done which events in an online game I play. I'd love it if I had the option to save the values of the checkboxes between visits (and ideally, character names as well), but I'm not great at coding. Also, I'd strongly prefer it if this information could be saved/cleared/reloaded on command, and not otherwise. </p>
  
  <p><a href="http://pastebin.com/8PBKtQBE" rel="nofollow">The page in question</a>, please pardon me if my code isn't efficient or attractive. I actually prefer to work with it a bit more bunched up, but I tidied it for your benefits.</p>
  
  <p>There had been a suggestion <a href="http://jsfiddle.net/sQuEy/4/" rel="nofollow">here</a> that I was trying to work with:</p>
  
  <pre><code>var i, checkboxes = document.querySelectorAll('input[type=checkbox]');
  
  function save() {
      for (i = 0; i &lt; checkboxes.length; i++) {
          localStorage.setItem(checkboxes[i].value, checkboxes[i].checked); 
      }
  }
  
  function load_() {
      for (i = 0; i &lt; checkboxes.length; i++) {
          checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
      }
  } 
  </code></pre>
  
  <p>But while it works fine in the test, it won't work when I put it into my document (you'll see the var i at the top still, the rest of the code I'd put above the reset function).</p>
  
  <p>Help?</p>