Skip to content

Instantly share code, notes, and snippets.

@steinbring

steinbring/StoreFormValuesInLocalStorage-Part1.html

Created November 18, 2012 01:35
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save steinbring/4102586 to your computer and use it in GitHub Desktop.
Save steinbring/4102586 to your computer and use it in GitHub Desktop.
Download ZIP
How to use localStorage and sessionStorage to make form values persistant
Raw
StoreFormValuesInLocalStorage-Part1.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="windows-1252">
<title>Keep webform data persistent</title>
<!-- jQuery CDN -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
/*Float the form labels to the left and allow them 40% of the width of the form*/
label {
clear:both;
float: left;
width:40%;
}
/*Float the form inputs to the right and allow them 50% of the width of the form*/
input {
float: right;
width: 50%;
}
/*Allow the form to use 50% of the width of the page*/
form {
width:50%;
}
</style>
</head>
<body>
<!-- Output a simple webform to collect user data -->
<form method="post">
<label for"fname">First Name</label>
<input name="fname" type="text" size="20">
<label for="mname">Middle Name</label>
<input name="mname" type="text" size="20">
<label for="lname">Last Name</label>
<input name="lname" type="text" size="20">
<!-- When the user "submits" data, call the debug function. Do not actually submit anything. -->
<button type="button" onclick="debug()">Submit</button>
</form>
<script type="text/javascript">
// This function doesn't do anything special. It simply dumps the values from the form to the browser's console. It is meant to show the variables we will be dealing with in the next parts.
function debug(){
// Simply output the form's values to the browser console.
$('form input[type=text]').each(function(){
console.log(this.name+': '+this.value);
});
}
</script>
</body>
</html>
Raw
StoreFormValuesInLocalStorage-Part2.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="windows-1252">
<title>Keep webform data persistent</title>
<!-- jQuery CDN -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
/*Float the form labels to the left and allow them 40% of the width of the form*/
label {
clear:both;
float: left;
width:40%;
}
/*Float the form inputs to the right and allow them 50% of the width of the form*/
input {
float: right;
width: 50%;
}
/*Allow the form to use 50% of the width of the page*/
form {
width:50%;
}
</style>
</head>
<body>
<!-- Output a simple webform to collect user data -->
<form method="post">
<label for"fname">First Name</label>
<input name="fname" type="text" size="20">
<label for="mname">Middle Name</label>
<input name="mname" type="text" size="20">
<label for="lname">Last Name</label>
<input name="lname" type="text" size="20">
<!-- When the user "submits" data, call the saveForm function and then call the debug function. Do not actually submit anything. -->
<button type="button" onclick="saveForm();debug();">Submit</button>
</form>
<script type="text/javascript">
// Create an array to hold the form contents inside
var myForm = [];
function saveForm(){
// Take each input's name and value and add it to the array we already created.
$('form input[type=text]').each(function(){
myForm.push({ name: this.name, value: this.value});
});
}
function debug(){
// Loop through our array and output the values. These values should reflect what form inputs we have above and what their current values are.
for (var i = 0; i < myForm.length; i++) {
console.log(myForm[i].name+': '+myForm[i].value);
}
}
</script>
</body>
</html>
Raw
StoreFormValuesInLocalStorage-Part3.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="windows-1252">
<title>Keep webform data persistent</title>
<!-- jQuery CDN -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
/*Float the form labels to the left and allow them 40% of the width of the form*/
label {
clear:both;
float: left;
width:40%;
}
/*Float the form inputs to the right and allow them 50% of the width of the form*/
input {
float: right;
width: 50%;
}
/*Allow the form to use 50% of the width of the page*/
form {
width:50%;
}
</style>
</head>
<body>
<!-- Output a simple webform to collect user data -->
<form method="post">
<label for"fname">First Name</label>
<input name="fname" type="text" size="20">
<label for="mname">Middle Name</label>
<input name="mname" type="text" size="20">
<label for="lname">Last Name</label>
<input name="lname" type="text" size="20">
<button type="submit" name="Submit">Submit</button>
</form>
<script type="text/javascript">
// Let's put both functions within a resonably named namespace
var formData = {
set : function (){
// (Re)create the myForm valiable
var myForm = [];
// Delete old data from localstorage
localStorage.removeItem('myForm');
// Take each input's name and value and add it to the array we already created.
$('form input[type=text]').each(function(){
// Push each input's value into the temporary variable
myForm.push({ name: this.name, value: this.value});
});
// Add the array to localStorage
localStorage.myForm = JSON.stringify(myForm);
},
get : function (){
// Is the form already stored within localStorage? If so, get it and copy it's contents over our myform array variable.
if(localStorage.myForm != undefined){
// Get the existing values out of localStorage
myForm = JSON.parse(localStorage.myForm);
// Loop through myForm
for (var i = 0; i < myForm.length; i++) {
// Populate the form with what data you have for it
$('[name='+myForm[i].name+']').val(myForm[i].value);
}
}
}
}
// Populate the form with whatever data already exists for it
formData.get();
// Watch for a change in a change in an input field. If there is a change, resave the form values.
$("input").change( function() {
// If a change is detected, save the values.
formData.set();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment