title: HTML5 Local Storage store form data for select box where multiple values are selected
body: <p>I have a form which saves a users preferance in local storage, it can be seen in <a href="http://jsfiddle.net/aaronk85/hqVGS/5/" rel="nofollow">this fiddle or below</a>.</p>
  
  <p>With what I have so far there are 2 main problems.</p>
  
  <ol>
  <li>On clicking the save button you are meant to empty the myStorage then append what you have just selected in there, so they can see the live result of what they have clicked.  It only remembers if you re-run the fiddle.</li>
  <li><p>My biggest problem is that what I have is great for select fields with one option but in this case the user can select multiple, so what do I need to add to it so that the user can save multiple values to local storage so next time they load the page there multiple selections will be saved?</p>
  
  <pre><code>&lt;form name="Filter"&gt;
  &lt;select multiple="1" id="filter"&gt;
      &lt;option value="111"&gt;Andrew&lt;/option&gt;
      &lt;option value="222"&gt;Bill&lt;/option&gt;
      &lt;option value="333"&gt;Charles&lt;/option&gt;
      &lt;option value="444"&gt;Dikembe&lt;/option&gt;
      &lt;option value="555"&gt;Edward&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  &lt;div id="store"&gt;click to store&lt;/div&gt;
  &lt;br&gt;
  &lt;h3&gt;People I have stored&lt;/h3&gt;
  
  &lt;div id="myStorage"&gt;&lt;/div&gt;
  </code></pre></li>
  </ol>
  
  <p>JS</p>
  
  <pre><code>    var iSelectedTitle = localStorage.getItem('title');
      var iSelectedVal = localStorage.getItem('value');
      console.log("iSelectedTitle: " + iSelectedTitle);
      console.log("iSelectedVal: " + iSelectedVal);
  
      $("#filter option").each(function () {
          if ($(this).val() == iSelectedVal) {
              $(this).attr("selected", "selected");
          }
      });
  
      $("#store").click(function () {
          var mytitle = $("#filter option:selected").text();
          var storedTitle = localStorage.setItem("title", mytitle);
          console.log("mytitle: " + mytitle);
          console.log("storedTitle: " + storedTitle);
  
          var myValue = $("#filter option:selected").val();
          var storedValue = localStorage.setItem("value", myValue);
          console.log("myValue: " + myValue);
          console.log("storedValue: " + storedValue);
  
          if (iSelectedTitle != "undefined") {
              $('#myStorage').empty().append(iSelectedTitle);
          }
      });
      if (iSelectedTitle != "undefined") {
          $('#myStorage').append(iSelectedTitle + ' - &lt;a target= "_blank "href="http://www.example.com/' + iSelectedVal + '"&gt;View profile&lt;/a&gt;');
      }
  </code></pre>