title: Saving form data to local storage and show it on refresh
body: <p>I am making a form where users can input their data. I'd like for this date to be saved by use of local storage. But when i refresh the page only height and weight are still remembered. And i have been quite stuck on trying to make gender , sportivity and birthdate be remembered as well.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" /&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function() {
              $(window).unload(saveSettings);
              loadSettings();
          });
  
          function loadSettings() {
              $('#height').val(localStorage.height);
              $('#weight').val(localStorage.weight);
              $('#dateOfBirth').val(localStorage.dateOfBirth);
              $('input[type=radio]:checked').val(localStorage.gender);
              $("#sportive").find("option[value=" + localStorage.sportive + "]").attr("selected", "selected");
          }
  
          function saveSettings() {
              var height = document.getElementById("height").value;
              var weight = document.getElementById("weight").value;
              var sportive = document.getElementById("sportive").value;
              var gender = $('input[type=radio]:checked').val();
              var dateOfBirth = document.getElementById("dateOfBirth").val();
  
              localStorage.height = height;
              localStorage.weight = weight;
              localStorage.dateOfBirth = dateOfBirth;
              localStorage.sportive = sportive;
              localStorage.gender = gender;
          }
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div data-role="content"&gt;
  
          &lt;form id="myForm" &gt;
  
              gender:
  
              &lt;input id="man" type="radio" name="gender" value="Man" &gt;
              &lt;label for="man"&gt;Man&lt;/label&gt;
  
              &lt;input id="vrouw" type="radio" name="gender" value="Vrouw"&gt;
              &lt;label for="vrouw" &gt;Vrouw&lt;/label&gt;
  
              dateOfBirth:
              &lt;input type="date" id="dateOfBirth" name="datum" required /&gt;
  
              weight (in kg):
              &lt;input type="number" id="weight" name="weight" required /&gt;
  
              height (in cm):
              &lt;input type="number" id="height" name="height" required /&gt;
  
              Hoeveel keer doe je aan sport per week?
              &lt;select id="sportive" name="sport"&gt;
                  &lt;option value="1.2" &gt;Weinig of geen training, kantoorwerk&lt;/option&gt;
                  &lt;option value="1.375"&gt;Lichte training/sport 1-3 dagen per week&lt;/option&gt;
                  &lt;option value="1.55" &gt;Gemiddelde training/sport 3-5 dagen per week&lt;/option&gt;
                  &lt;option value="1.725" &gt;Zware training/sport 6-7 dagen per week&lt;/option&gt;
                  &lt;option value="1.9" &gt;Zware dagelijkse training/sport plus lichamelijk werk&lt;/option&gt;
              &lt;/select&gt;
  
              &lt;br /&gt;
  
          &lt;/form&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>greetings</p>