Question

158

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

rated 0 times [ 161] [ 3] / answers: 1 / hits: 15164 / 11 Years ago, fri, october 4, 2013, 12:00:00

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:

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.

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.

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

irvinjovannix

Add To Favorites

Follow

Total Points: 416

Total Questions: 94

Total Answers: 117

Location: South Korea

Member since Sun, Aug 8, 2021

3 Years ago

answered 11 Years ago acaciac · Accepted Answer

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.