Checkboxes and <select> options don't persist in HTML 5 local storage

I'm coming to an unexpected conclusion regarding HTML5 local storage persistence and inputs. When I use < input type="text" > or < input type="textarea" >, then the data persists in local storage and on page load loads back into fields at the push of a button. But when I use type="radio" type="checkbox" or < select > options, none of those types of data persists.

Is this behavior by design, and I'm pushing against a brick wall trying to make it work, or is it my form element scripting that needs an overhaul? If it's by design, then you can answer yes. If not, you can check the details of my work below to give it a checkup and any feedback.

The user enters data into textarea fields like this:

<textarea name="s1frontTowerShockMtgOther" id="s1frontTowerShockMtgOther" cols="20" rows="4">

Then they tap on the save button coded like this:

<input type="button" value="Save Settings" onclick="persistData()" style="background-color:red; font-weight:bold">

The Javascript page does its magic:

function persistData()
            {
                if (html5StorageSupported())
                {
                    var s1frontTowerShockMtgOther = document.form1["s1frontTowerShockMtgOther"].value;
                    var storageIndex = "practicelog.html.s1frontTowerShockMtgOther";
                    localStorage[storageIndex] = s1frontTowerShock开发者_开发问答MtgOther;

                document.form1.numStored.value = determineNumberStoredElements();

                }
            }

When the user returns to the page, he taps on this button to populate the fields on that page:

<input class="loadButton" type="button" value="Load Data First" onclick="loadData()">

The Javascript is called:

function loadData()
        {
         document.form1["s1frontTowerShockMtgOther"].value = localStorage["practicelog.html.s1frontTowerShockMtgOther"];

         } 

That's it. The following does not work:

<select size="1" name="frontTowerMtgShock" id="frontTowerMtgShock">
        <option value="">Tap to choose</option>
        <option value="0 spacers">3-outer</option>
        <option value="1 spacer">2-middle</option>
        <option value="2 spacers">1-inner</option>
        <option value="other">See notes</option>
    </select>

The following type="checkbox" does not work. It doesn't work if "checkbox" was replaced by "radio" either:

<input type="checkbox" name="s1frontTowerMtgShock3" id="s1frontTowerMtgShock3" value="3-outer">

I am doing this project for the iPhone with HTML, CSS, and Javascript through PhoneGap 1.0 integration.

The following works fine for me:

function persistData()
{
    var s1frontTowerShockMtgOther = document.form1["s1frontTowerShockMtgOther"].value;
    var storageIndex = "practicelog.html.s1frontTowerShockMtgOther";
    localStorage[storageIndex] = s1frontTowerShockMtgOther;
    storageIndex = "practicelog.html.frontTowerMtgShock";
    var frontTowerMtgShock = document.form1["frontTowerMtgShock"].value;
    localStorage[storageIndex] = frontTowerMtgShock;
}

function loadData()
{
     alert(localStorage["practicelog.html.frontTowerMtgShock"]);
     document.form1["frontTowerMtgShock"].value = localStorage["practicelog.html.frontTowerMtgShock"];
 } 

Have you double checked your storage keys when setting and retrieving?