How do I pre select selectbox and checkbox based on localStorage using jQuery

Question

The problem is that when I close the browser and test it again it does show the value, but when I refresh the page it doesn't show to the user the values already chosen previously,but the localStorage have the data stored.

<form id="suspendedProperties">
        <label for="stationDropdown">Select Station:</label>
        <select name="stationDropdown" id="stationDropdown" onChange="storeLocalContent(this.id,this.value)" >
            <option value="50028000">Tanama River</option>
            <option value="50010500">Rio Guajataca, Lares</option>
            <option value="60008002">Example River2</option>
            <option value="60008003">Example River3</option>
            <option value="60008004">Example River4</option>
         </select>


        <label for="sampleMediumDropdown">Select Sample Medium:</label>
            <select name="sampleMediumDropdown" id="sampleMediumDropdown" onChange="storeLocalContent(this.id,this.value)">
              <option value="WS">WS(Surface Water)</option>
              <option value="WSQ">WSQ(Surface Water QC)</option>
            </select>

        <label for="date">Begin Date:</label>
            <input naem="date" id="beginDate" type="date" onChange="storeLocalContent(this.id,this.value)" />

         <label for="hydroEvent">Hydrologic Event:</label> <select name="hydroEvent" id="hydroEvent" onChange="storeLocalContent(this.id,this.value)" >
                                <option value="4">4- stable, low stage</option>
                                <option value="5">5- falling stage</option>
                                <option value="6">6- stable, high stage</option>
                                <option value="7">7- peakstage</option>
                                <option value="8">8- rising state</option>
                                <option value="9" selected>9- stable, normal stage</option>
                                <option value="A">A- Not Determined</option>
                                <option value="X">X- Not applicable</option>  
                              </select>

    <label for="containerCuantity">Add: </label><input type="number" min="1" value="1" id="containerCuantity"onChange="storeLocalContent(this.id,this.value)"/> 
    <select id="singleMultiContainer"name="singleMultiContainer" onChange="storeLocalContent(this.id,this.value)">
                                            <option value="single">Single container sample</option>
                                            <option value="multi">Multiple sets container</option>
                                           </select>

    <h4 >Analyses Requested:(Applies to all samples)</h4>

      <label for="analysesC">Concentration</label><input type="checkbox" name="analysis" id="analysesC" value="C" onChange="isChecked(this.id,this.value)"/>
      <label for="analysesSF">Sand-Fine break**</label><input type="checkbox" name="analysis" id="analysesSF" value="SF"onChange="isChecked(this.id,this.value)"/>
      <label for="analysesSA">Sand Analysis**</label><input type="checkbox" name="analysis" id="analysesSA"value="SA" onChange="isChecked(this.id,this.value)"/>
    <label for="analysesT">Turbidity</label><input type="checkbox" name="analysis" id="analysesT" value="T" onChange="isChecked(this.id,this.value)"/>
     <label for="analysesLOI">Loss-on-ignition**</label><input type="checkbox" name="analysis" id="analysesLOI" value="LOI" onChange="isChecked(this.id,this.value)"/>
     <label for="analysesDS">Dissolved Solids</label><input type="checkbox" name="analysis" id="analysesDS"value="DS" onChange="isChecked(this.id,this.value)"/>
     <label for="analysesSC">Specific Conductance</label> <input type="checkbox" name="analysis" id="analysesSC" value="SC" onChange="isChecked(this.id,this.value)"/>                                  
     <label for="analysesZ">Full-size fractions**</label><input type="checkbox" name="analysis" id="analysesZ"value="Z" on onChange="isChecked(this.id,this.value)"/>


    </form>

This is my localStrg.js:

var ls = window.localStorage;

function initialize(){
    //Check if browser supports localStorage
    if(!Modernizr.localstorage){
        alert("Your browser will not store data, please change or update your current browser");
        return false;
        }

    if(ls.length!= 0){
        for(i=0;i<ls.length;i++){
            getData(ls.key(i));
            alert(ls.key(i));
        }
    }
}
function storeData(id,value){
    ls.setItem('#'+id,value);
    alert("Item saved"+' '+'#'+id);
}

function getData(id){
    $(id).val(ls.getItem(id));
    $(id).selectmenu('refresh');
}

$(document).ready(function(e) {
    initialize();
});

All I want to do is to show the user the values he have chosen previously in their respective fields.

Example, if he chose option 4 in the dropdown and he refresh the page he should see option 4 already in the dropdown not option 1.

Answer 1

The code it's OK, the mistake is when I initialize JQuery Mobile:

<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="localStorage.js"></script>

That gives me all the defaults value from JQuery and then it loads my values from the localStorage. All I had to do is change the script of localStorage.js before initializing jquery mobile.

<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="localStorage.js"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

You can find a more detailed explanation here