How to set the value of select dropdown in localstorage and retrieve it as well as set the value as default unless changed?

Question

Here is what I am trying to do.

First of all, this is in a Chrome extension.
In the file, popup.js, which runs on popup.html (this code is to SET the value, when I choose a select option):

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);
    });
}

Now after that I have code to retrieve the value that should now be stored in localstorage:

function getAndDisplayTheValue() {
    myValue = localStorage.getItem('mySelectValue');
    document.write(myValue);
}

Okay so that is the javascript file. Now here is the popup.html file:

            <select id="mySelectValue">
                <option name="" value="">choose a value</option>
                    <option value="first" name="first">first value</option>
                    <option value="second" name="second">second value</option>
                    <option value="third" name="third">third value</option>
            </select>

---

Ok so what I want to do, is:

1. When I choose a value, for example first value, I want it stored in local storage. So now in localstorage it stored the value first.
2. If I decided no i didn't want that and changed to second value, then it should overwrite the localstorage and now in localstorage second should be the value that is stored there now.
3. Next time you open the page (in this case popup.html), instead of the default value being choose a value (with empty name and value), instead the default value should be pulled from localstorage so since you chose second value before, now second value should be the default value.

Answer 1

I know its been years since you post here.

I just came up with such an easy way to do it.

Javascript:

var variablestoraged = localStorage.getItem("variablestoragedname"); 

if(localStorage.getItem("variablestoraged").length>0){
    document.getElementById(variablestoraged).selected = "true";
} else{}

And on html

    <option value="Male" id="Male">Male</option>
    <option value="Female" id="Female">Female</option>

Hope it helps others, I struggle with this at 2021

Answer 2

Using jQuery you can use something like :

let value = localStorage.getItem("key");
$("select#mySelectBox").val(value);

You can set one of the values you put in the value attribute.

<select>
    <option value="a">First Value</option>
    <option value="b">Second Value</option>
    <option value="c">Third Value</option>
</select>

In this example the value you get from localStorage should be one of the following: a, b or c. The change event will not be emitted. You can use this instruction inside your event handler without fear of infinite recursion.

With Pure Javascript it follows the same logic. Just change the previous instructions with

document.querySelector("select#mySelectBox").value = theValueFromLocalStorage

Answer 3

I figured it out myself.

Basically, you store the value in local storage, and you don't display any value for the first option. Then instead of text on the first option, you leave it blank and in its place you put in a javascript that uses the value from localstorage and document.write to print the value out as text in the the first option box.

Now, the obvious problem is that at first, it will be blank, so the way I tackled this was to check if it was null, and if the value was null (there was no value set in localstorage yet), then to automatically set a value.

Further, instead of printing just the value, I checked for each available value and if that value was the one stored in localstorage, then what I did was to print whatever text I wanted for each given value.

Check out the working jsbin example: http://jsbin.com/ELOKEJU/1
You'll see if you change the value to say Option C, and then refresh the page, that Option C is now the default value.

Additionally, the fact that it is displaying Option C after the page reload, means that it is successfully stored in localstorage, because if it wasn't then it would display nothing, or Option A from the null value. This means you can use that localstorage value in other places to perform other functions.

Here is how to do it:

page.html

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="js/background.js"></script>
</head>
<body>
  <select id="myDynamicSelectBox">
      <option value=""><script type="text/javascript" src="js/theStoredValue.js"></script>
      </option>
      <option value="a">Option A</option>
      <option value="b">Option B</option>
      <option value="c">Option C</option>
      <option value="d">Option D</option>
      <option value="e">Option E</option>
  </select>
</body>
</html>

js/theStoredValue.js

if (localStorage.getItem('mySelectLocalstorageValue') === null) { 
                localStorage.setItem('mySelectLocalstorageValue', "a");
                document.write("Option A"); 
            }
            else {
                if (localStorage.getItem('mySelectLocalstorageValue') === "a") { 
                    document.write("Option A"); 
                } else if (localStorage.getItem('mySelectLocalstorageValue') === "b") { 
                    document.write("Option B"); 
                } else if (localStorage.getItem('mySelectLocalstorageValue') === "c") { 
                    document.write("Option C"); 
                } else if (localStorage.getItem('mySelectLocalstorageValue') === "d") { 
                    document.write("Option D"); 
                } else if (localStorage.getItem('mySelectLocalstorageValue') === "e") { 
                    document.write("Option E"); 
                }
            }

js/background.js

$(document).ready(function(){
    $('#myDynamicSelectBox').change(function(){
         localStorage.setItem('mySelectLocalstorageValue', $(this).val());
         $('#myDynamicSelectBox').value(localStorage.getItem('mySelectLocalstorageValue'));
    });
});

p.s. in the working example I used intuitive id and localstorage names so you could easily understand. Feel free to change the names to whatever you like.

Enjoy the solution. I hope people actually help me in future questions.