Created
November 18, 2012 01:35
-
-
Save steinbring/4102586 to your computer and use it in GitHub Desktop.
How to use localStorage and sessionStorage to make form values persistant
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 formDataStorage = { | |
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 | |
formDataStorage.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. | |
formDataStorage.set(); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment