setItem and getItem for localStorage code not working

JavaScript
1

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.

<!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>
2

Good news! I got the script to work at last, BUT when the page is reloaded, there are quotes around the figure entered. What should I change to keep the quotes from appearing? Here’s the script so far (everything else around the web page is the same as the OP).

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

function getItemForm1b() {
//    var SOneDateFrom = JSON.parse(localStorage.getItem('SOneDateFrom'));
    var SOneDateFrom = localStorage.getItem('SOneDateFrom');
    alert('getItemForm1B: '+ SOneDateFrom);
    form1b.SOneDateFrom.value = SOneDateFrom; // shows quotes!
}

function deleteStorage() {
    form1b.SOneDateFrom.value = localStorage.setItem('SOneDateFrom','');
    if (form1b.SOneDateFrom.value === "undefined") { form1b.SOneDateFrom.value = ""; }
    alert('deleteItemForm1B: '+ SOneDateFrom);
}
3

So there’s no way to get rid of the quotes around the entries?

4

I will look into using regular expressions.

5

You use JSON.stringify when putting the data in, so it would make sense to use JSON.parse for when retrieving it.

6

I believe that’s what I’m doing. Am I doing it wrong? I guess I don’t understand your comment. Is JSON the way to get rid of the quotes?

7

Thanks, I got it! Now it works.

var SOneDateFrom = localStorage.getItem(‘SOneDateFrom’);
form1b.SOneDateFrom.value = JSON.parse(SOneDateFrom);