title: Save user selected color to localstorage
body: <p>I have been trying to save user selection to localstorage but the code is not working. I want it to save the color the user selects to localstorage so that if the user changes or refreshes the page the background color stays there.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function change(list) {
      var val=list.options[list.selectedIndex].value;
      document.body.style.background=val;
  }
  $(function () {
      $('#changer').change(function () {
          localStorage.setItem('todoData', this.value);
  });
  if (localStorage.getItem('todoData')) {
      $('#changer')
        .val(localStorage.getItem('todoData'))
        .trigger('change');
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#pageFooter{
      background-color: #F49080;
      color: white;
      text-align: right;
      position: relative;
      margin-top: -50px;
      clear: both;
  }
  label{
      font-size: 14px;
      font-family: sans-serif;
      color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;footer id="pageFooter"&gt;
      &lt;label&gt;Select Color&lt;/label&gt;
      &lt;select id="changer" onchange="change(this)"&gt;  
          &lt;option value=""  selected disabled hidden&gt; - - Select Color - -&lt;/option&gt; 
          &lt;option value="Black"&gt;Black&lt;/option&gt;
          &lt;option value="#D48166"&gt;Orange&lt;/option&gt;
          &lt;option value="DarkGreen"&gt;Dark Green&lt;/option&gt;
          &lt;option value="#D6A3FB"&gt;Pink&lt;/option&gt;
          &lt;option value="#003b49"&gt;Original&lt;/option&gt;
      &lt;/select&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>