I am trying to get a field to save to localStorage automatically when entered, then, if the page is refreshed, load the data automatically into the field, then tap a button to remove the data. So far, the following code does not work (refreshing the page does not recall the data).

Can you point out where I'm going wrong? This is a test case for using setItem and getItem. Chrome Tools reports no errors in console.

HTML Code:
<!DOCTYPE html> 
<html> 
	<head> 
	<title>testing localStorage</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">        

<script type="text/javascript" src="../jquery/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="../jquery/jquery.mobile-1.0rc1.js"></script>
<link type="text/css" rel="stylesheet" href="../jquery/jquery.mobile-1.0rc1.css" media="screen" /> 

<script type="text/javascript">

function setItemForm1b()
{
    var SOneDateFrom = document.getElementById("SOneDateFrom");
    localStorage.setItem("SOneDateFrom", JSON.stringify(SOneDateFrom.value)); 
}           
  
function getItemForm1b() {
    var SOneDateFrom = JSON.parse(localStorage.getItem("SOneDateFrom")); 
}

function deleteStorage() {
    localStorage.clear();
}

</script>
</head> 

<body>
               
                
<div data-role="content">
<form name="form1b">    
                             
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" onclick="setItemForm1b()">setItem</a>
<a href="#" data-role="button" onclick="getItemForm1b()">getItem</a>
<a href="#" data-role="button" onclick="deleteStorage()">remItem</a>
</div>
<br>               
                    <ul data-role="listview" data-dividertheme="b">                        
                        <li data-role="list-divider">Event Information</li>
                        <li>Event Date: From<br>
                            <input type="text" name="SOneDateFrom" id="SOneDateFrom" class="singleline" data-role="none" onchange="setItemForm1b()">
                            
                        </li>
                     </ul>
                    
                </form>
</div>  <!--content-->
                
                <div data-role="footer">
                    <p class="footer-image"><img src="../SC10images/copyright.png" alt="" width="100%"></p>
                </div><!-- /footer -->
            </div><!-- /page -->
            
            
            
  
<script type="text/Javascript">
getItemForm1b();
$(document).delegate("textarea,select,input[type='text']","change",
function() { setItemForm1b($(this)); 
}
);
</script>      
    
</body>
</html>