Populating one select option with localStorage is unsuccessful

JavaScript
1

I am trying to add another option to the select drop-down, populated from a localStorage field. I haven’t been successful. Here’s my latest attempt:

<select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
    <option value="">choose setup</option>
    <option value="setup 1">setup 1</option>
    <option value="setup 2">setup 2</option>
    <script type="text/javascript">
var aboutSetup1 = localStorage.getItem('aboutSetup1'); formTesting.testingSetup.value += "\
 <option value=\\""+aboutSetup1+"\\">"+aboutSetup1+"</option>"
    </script>
</select>

Google Chrome shows no errors, but it doesn’t show the option, either. How do I populate a new option with a localStorage value with Javascript?

2

How about this?


    <script type="text/javascript">
var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
    </script>
<select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
    <option value="">choose setup</option>
    <option value="setup 1">setup 1</option>
    <option value="setup 2">setup 2</option>
    <script> document.write("<option value=\\""+aboutSetup1+"\\">"+aboutSetup1+"</option>");</script>
</select>
3

Thanks, but Google still displays a blank page (so does FF). No errors.

4

I believe you want this:

var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.options[formTesting.testingSetup.options.length] = new Option(aboutSetup1, aboutSetup1);
5

No, the drop-down still doesn’t show the option. I have:

  <script type="text/javascript">
var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.option[formTesting.testingSetup.option.length] = new option(aboutSetup1, aboutSetup1);</script>
            <select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
                                <option value="">choose setup</option>
                                <option value="setup 1">setup 1</option>
                                <option value="setup 2">setup 2</option>
            </select>

At least the screen is no longer blank.

6

You need to run it in the onload event, or the domReady event.

window.onload = function() { var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.option[formTesting.testingSetup.option.length] = new option(aboutSetup1, aboutSetup1); }
7

Also you copied and pasted my code incorrectly, where I have options, you have option, and where I have Option you have option.
Proof of Concept: http://jsfiddle.net/cpradio/YFdjf/

8

I put this in the head:

window.onload = function() { 
var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.option[formTesting.testingSetup.option.length] = new option(aboutSetup1, aboutSetup1); 
var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.options[formTesting.testingSetup.options.length] = new Option(aboutSetup1, aboutSetup1);
}

and the select section is now:

<script type="text/javascript">
var aboutSetup1 = localStorage.getItem('aboutSetup1'); 
formTesting.testingSetup.options[formTesting.testingSetup.options.length] = new Option(aboutSetup1, aboutSetup1);</script>
            <select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
                                <option value="">choose setup</option>
                                <option value="setup 1">setup 1</option>
                                <option value="setup 2">setup 2</option>
            </select>

Google tools says, “Uncaught TypeError: Cannot read property ‘options’ of undefined”

9
  1. Remove the script tag from your HTML markup. That is no longer necessary.
  2. To fix the Error, you need to replace formTesting with the name of your <form> element.
10

I removed all the <script></script> information from the select.

The form name is correct: formTesting. (All my form names are prefixed with “form.”)

I corrected the misspelled var. I entered data into the variable. The variable still doesn’t appear in the dropdown. No errors in Chrome now. Now reads:

window.onload = function() {
var aboutSetupOne = localStorage.getItem(‘aboutSetupOne’);
formTesting.testingSetup.options[formTesting.testingSetup.options.length] = new Option(aboutSetupOne, aboutSetupOne);
}

11

My guess is your localStorage is either an empty string, null, or doesn’t exist.

My proof of concept code now handles when the localStorage is null. You may want to put something like console.log(localStorage.getItem(‘aboutSetupOne’)); and open the Developer tools to see what it outputs.

12

Do I need to sign in to jsfiddle to make it work? Clicking on the drop-down box does not show anything other than setup 1 and setup 2 in the options. ‘Testing’ does not appear for me.

Adding the console code shows the var content successfully, so the var content is in memory. It’s just not among the options.

Thanks for helping.

13

What browser are you using? I am using Chrome v17 Portable, and in the Result pane I see Testing as the third option

14

I was using FF. I just tried it in Chrome and I see Testing as the third option. Unfortunately, this code is being run on the iPhone and it has to work there, on Webkit browsers. Since it works on Chrome, it should work on the iPhone. Still need to study this…

15

I can’t comment on the iPhone, I don’t do any phone development. What I can say, is the code should work on just about any browser (not sure why it failed in Firefox – I’ll take a look as that bothers me; maybe FF doesn’t support localStorage?).

16

Got the FF issue resolved. Seems it was failing to load jQuery (due to needing to use POST instead of GET). I just changed the framework to MooTools (since we aren’t using a framework, the framework is really unnecessary).

I also had to use document.formTesting instead of just formTesting.

17 
<select size="1" name="testingSetup" id="testingSetup" onchange="document.formTesting.testingSetupLoad.value = this.value">
    <option value="">choose setup</option>
    <option value="setup 1">setup 1</option>
    <option value="setup 2">setup 2</option>
</select>

<script type="text/javascript">

 var aboutSetup1 = localStorage ? localStorage.getItem( 'aboutSetup1' ) : null;

 if( aboutSetup1 )
   document.getElementById( "testingSetup" ).options.add( new Option( aboutSetup1, aboutSetup1 ) );

 // localStorage.setItem( 'aboutSetup1', 'The_New_Option' );

</script>
18

FF does support localstorage. The good news is that the iPhone understands Javascript just fine!

19

I’m using Jquery Mobile.

Chrome sees no errors in your #17 code, but I don’t see the new options in the drop-down, either. Thanks for responding!

20

What do you see if you execute the following line in Chrome’s address bar?

javascript:str="localStorage%20content

";for(var%20x%20in%20localStorage){void(str+=x+‘%20:%20’+localStorage+’
')}alert(str)

Note that when you paste the above line into the address bar, javascript: will probably be stripped-out and will need to be replaced before pressing Enter.

You should get an alert of all current localStorage content.