title: Save user input on HTML page using HTML5 web storage
body: <p>I am creating a crossword puzzle web app that pulls XML data from a server, parses the data with javascript and builds the puzzle on the page using the [canvas] tag. When a user selects a clue and types in a correct answer, letters are placed in the corresponding squares of the crossword puzzle.</p>
  
  <p>Here's a snippet of the code that places the letters in the corresponding squares:</p>
  
  <pre><code>function answer() {
  if (this.value != '') {
      var letters = this.value.split('');
      var correct = xmlhttp.responseXML.getElementsByTagName(node)[0].getAttribute('a').split('');
      var numCorrect = 0;
      for (var i = 0; i &lt; selected.length; i++) {
          if (letters[i]) {
              if (letters[i].toUpperCase() == correct[i]) {
                  eval('ctx.drawImage(i'+letters[i].toLowerCase()+'b, '+((selected[i].id%15)*26)+', '+(Math.floor(selected[i].id/15)*26)+')');
                  matrix[selected[i].id] = 1;
                  numCorrect++;
              } else {
                  matrix[selected[i].id] = 0;
              }
          }
      }       
      if (numCorrect == correct.length) {
          alert('Correct!');
          clearSelection();
  
      } else if (numCorrect == 0) {
          alert('Incorrect, try again.');
          document.getElementById('answer').value = '';
          document.getElementById('answer').focus();
      } else if (numCorrect != correct.length) {
          alert('Only some letters are correct.');
          clearSelection();
      }
      checkForWin();      
  }
  }
  </code></pre>
  
  <p>My question is, how do I save the state of the puzzle and the XML (using HTML5 web storage) so that the user can play offline and to prevent them from losing their progress in the event of a browser refresh?</p>
  
  <p>Can anyone help me with this one, I am not very familiar with the HTML Web Storage API...but I hear that it is a valuable tool for web apps. Your advice will be much appreciated.</p>
  
  <p>Thanks,
  Carlos</p>