HTML5 Storage Not working

Question

I am working on forwarding data from the current page to the same next page i.e. whenever the page is loaded again, the code checks if there is any such storage, if it is then it loads the values in text box. I am not able to get it to work Below is the code -

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    function values()
    {
        if(localStorage.getItem(pranav))
        {
            document.getElementById(FName).innerText= sessionStorage.getItem(pranav);
           document.getElementById(OName).innerText= sessionStorage.getItem(k);
        }
        else
        {
            sessionStorage.setItem("pranav", "P");
            sessionStorage.setItem("k", "P");
            return;
        }
    }
</script>

</head>

<body>
<form name="myform" action="Idea.html" onload="values(this.form)">
    <label>Please Enter Your Full Name = </label><input type="text" name="FName" id="FName" />
    <label>Please Enter Your Current Organization</label><input type="text" name="OName" id="OName" />
    <input type="submit" value="Submit" onclick="values(this.form)" />
</form>

</body>
</html>

Kindly help me as to why this is not working?

The key "pranav" should be in quotes in the first call to `.getItem()` — Pointy, Oct 26 '14 at 16:04

Darin Dimitrov · Accepted Answer · 2014-10-26T16:43:19.833

1

You haven't declared the pranav and k variables you used. Also when you are assigning a value to an input field you should use the .value property instead of .innerText.

Also you might consider splitting your code in 2 functions:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
    function loadValues() {
        var data = localStorage.getItem('data');
        if(data) {
            data = JSON.parse(data);
            document.getElementById('FName').value = data.firstName;
            document.getElementById('OName').value = data.lastName;
        }
    }

    function saveValues() {
        var data = {
            firstName: document.getElementById('FName').value,
            lastName: document.getElementById('OName').value
        };
        localStorage.setItem('data', JSON.stringify(data));
    }
    </script>
</head>
<body onload="loadValues()">
    <form name="myform" action="Idea.html" onsubmit="saveValues()">
        <label>Please Enter Your Full Name = </label>
        <input type="text" name="FName" id="FName" />
        <label>Please Enter Your Current Organization</label>
        <input type="text" name="OName" id="OName" />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

edited Oct 26 '14 at 16:43

answered Oct 26 '14 at 16:05

Darin Dimitrov

1,023,142
271
3,287
2,928

Just tried this but the JavaScript is not changing the text box value automatically on page reload or clicking the submit button. – Pranav Jituri Oct 26 '14 at 16:08
Well, you probably want to separate this into 2 functions: one that is called when the socument is called (body onload) and one which is called when the form is submitted. I have updated my answer with an example. – Darin Dimitrov Oct 26 '14 at 16:09
I tried this code using XAMPP and in every browser I have including Chrome, Waterfox and IE but nothing is happening when the page is refreshed. The values of the text fields are not being populated automatically on load? – Pranav Jituri Oct 26 '14 at 16:17
You need to first submit the form so that the values are stored in localstorage. Also I did a small mistake by placing the `onsubmit` attribute on the button whereas it should have been on the form. I have now updated my answer. Make sure that you use the code as shown here. – Darin Dimitrov Oct 26 '14 at 16:18
And the situation is much better, the JS is loading undefined in the Text Fields now on form submission. Thanks btw :) – Pranav Jituri Oct 26 '14 at 16:21
I am still not able to figure out the mistake in your code which is causing JavaScript to populate the Text Fields with "undefined" on form submission and page refreshing. Could you please take a look at it? – Pranav Jituri Oct 26 '14 at 16:34
After looking at the code, the values that are stored in localStorage can be simple types only. So they need to be JSON serialized. I have updated my answer to account for this. – Darin Dimitrov Oct 26 '14 at 16:44
Yups, just read this over - http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage/ I managed to use two different strings and then have them displayed using JavaScript since I don't have any idea of JSON :( Anyways, this solved my problem. Once again, Thanks! – Pranav Jituri Oct 26 '14 at 16:46

HTML5 Storage Not working

1 Answers1