title: Local Storage With JavaScript
body: <p>I want to store a string locally so when the user reloads the page it saves what was last there.  </p>
  
  <p>I looked at <a href="http://www.w3schools.com/html/html5_webstorage.asp" rel="nofollow">this</a> and tried to implement it. </p>
  
  <p>I had this code which basicllay has a button and a dropdown list of colors to change the background. </p>
  
  <p>When I close and reopen the doc I want it to be the color that I saved.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
          &lt;head&gt;  
  
          &lt;/head&gt;
  
          &lt;body&gt;
              &lt;form action=""&gt;
                  &lt;label&gt;
                      &lt;select id="color"&gt;
                          &lt;option value="#FFFFFF"&gt;White&lt;/option&gt;
                          &lt;option value="#FF0000"&gt;Red&lt;/option&gt;
                          &lt;option value="#FFCC00"&gt;Orange&lt;/option&gt;
                          &lt;option value="#FFFF00"&gt;Yellow&lt;/option&gt;
                          &lt;option value="#00FF00"&gt;Green&lt;/option&gt;
                          &lt;option value="#0000FF"&gt;Blue&lt;/option&gt;
                          &lt;option value="#663366"&gt;Indigo&lt;/option&gt;
                          &lt;option value="#FF00FF"&gt;Violet&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/label&gt;
                  &lt;input type="button" onClick="inputForm()" value="change color"/&gt;
              &lt;form&gt;
  
              &lt;script language="JavaScript"&gt;
              &lt;!--
                  function inputForm(){
                      var color = document.getElementById("color");
  
                      var outputContents=color.value;
  
                      document.body.style.backgroundColor = outputContents;
                  }
              //--&gt;
              &lt;/script&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I made this code to do that but it didn't work</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;  
      &lt;/head&gt;
  
      &lt;body onload="storeColor()"&gt;
          &lt;form action=""&gt;
              &lt;label&gt;
                  &lt;select id="color"&gt;
                      &lt;option value="#FFFFFF"&gt;White&lt;/option&gt;
                      &lt;option value="#FF0000"&gt;Red&lt;/option&gt;
                      &lt;option value="#FFCC00"&gt;Orange&lt;/option&gt;
                      &lt;option value="#FFFF00"&gt;Yellow&lt;/option&gt;
                      &lt;option value="#00FF00"&gt;Green&lt;/option&gt;
                      &lt;option value="#0000FF"&gt;Blue&lt;/option&gt;
                      &lt;option value="#663366"&gt;Indigo&lt;/option&gt;
                      &lt;option value="#FF00FF"&gt;Violet&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/label&gt;
              &lt;input type="button" onClick="inputForm()" value="change color"/&gt;
              &lt;input type="button" onClick="storeColor()" value="save color"/&gt;
              &lt;script&gt;
              var outputContents;
              function inputForm(){
                  var color = document.getElementById("color");
  
                  outputContents=color.value;
  
                  document.body.style.backgroundColor = outputContents;
              }
  
              function storeColor(){
                  // Store
                  localStorage.color = outputContents;
                  // Retrieve
                  document.body.style.backgroundColor = outputContents;
              }
              &lt;/script&gt;
          &lt;form&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>