CODEWITHSUNDEEP
javascripthtmllocal-storage
Karish Karish
Karish Karish

Reputation: 269

HTML local storage

I am trying to store information on local storage after filling the form with data , I want to save the form with its contents in the local storage, but for some reason it doesn't work once i submit information and refresh the page the information is not saved any suggestions 

<!--local Storage-->
<!DOCTYPE html>
<html>
<head>
<script>
function info()
{
    if(typeof(Storage)!=="undefined"){
        var fn = document.getElementById("FirstName").value;
        var ln = document.getElementById("LastName").value;
        var zc = document.getElementById("zipcode").value;

        localStorage.FastName = fn;
        localStorage.FirstName = ln;
        localStorage.Zipcode = zc;

        document.getElementById("result").innerHTML=localStorage.FastName+" "+" "+localStorage.FirstName+" "+localStorage.Zipcode;
    }else{
        document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
    }

}
</script>
</head>
<body>
<p>fill in your information:</p>
First name: <input type="text" id="FirstName" value=""><br>
Last name: <input type="text" id="LastName" value=""><br>
Zip Code: <input type="text" id="zipcode" value="" >
<p><button onclick="info();" type="button">Submit</button></p>
<div id="result"></div>
</body>
</html>

Upvotes: 0

Views: 575

Answers (1)

Stefan Haustein
Stefan Haustein

Reputation: 18813

You probably want to use localStorage.setItem("FirstName", fn); to write the values to localStorage.

If you want the values back in the input fields on reload, you need to populate the input fields at application startup by reading back the values from localStorage (via getItem) .

e.g. append at the end

<script>
document.getElementById("FirstName").value = localStorage.getItem("FirstName");
...
</script>

Upvotes: 1

Related Questions