title: How to set the value of select dropdown in localstorage and retrieve it as well as set the value as default unless changed?
body: <p>Here is what I am trying to do.</p>
  
  <p>First of all, this is in a Chrome extension.<br>
  In the file, popup.js, which runs on popup.html (this code is to SET the value, when I choose a select option):</p>
  
  <pre><code>function mySelectValue() {
      // Add an event listener for the value
      document.getElementById('mySelectValue').addEventListener('change', function() {
        // Get the value of the name field.
        var mySelectValue = document.getElementById('mySelectValue').value;
  
        // Save the name in localStorage.
        localStorage.setItem('mySelectValue', mySelectValue);
      });
  }
  </code></pre>
  
  <p>Now after that I have code to retrieve the value that should now be stored in localstorage:</p>
  
  <pre><code>function getAndDisplayTheValue() {
      myValue = localStorage.getItem('mySelectValue');
      document.write(myValue);
  }
  </code></pre>
  
  <p>Okay so that is the javascript file. Now here is the popup.html file:</p>
  
  <pre><code>            &lt;select id="mySelectValue"&gt;
                  &lt;option name="" value=""&gt;choose a value&lt;/option&gt;
                      &lt;option value="first" name="first"&gt;first value&lt;/option&gt;
                      &lt;option value="second" name="second"&gt;second value&lt;/option&gt;
                      &lt;option value="third" name="third"&gt;third value&lt;/option&gt;
              &lt;/select&gt;
  </code></pre>
  
  <hr>
  
  <p>Ok so what I want to do, is:<br></p>
  
  <ol>
  <li>When I choose a value, for example <strong><code>first value</code></strong>, I want it stored in local storage. So now in localstorage it stored the value <strong><code>first</code></strong>. </li>
  <li>If  I decided no i didn't want that and changed to <strong><code>second value</code></strong>, then it should overwrite the localstorage and now in localstorage <strong><code>second</code></strong> should be the value that is stored there now.</li>
  <li>Next time you open the page (in this case popup.html), instead of the default value being <strong><code>choose a value</code></strong> (with empty name and value), instead the default value should be pulled from localstorage so since you chose <strong><code>second value</code></strong> before, now <strong><code>second value</code></strong> should be the default value.</li>
  </ol>