In HTML 5, Localstorage is a good thing, in support of Localstorage browser, can persist user form input, even if you turn off the browser, the next time you open browser access, can also read its value, the following example is the use of jquery Read the value of Localstorage each time the form is loaded, and the example of its value when the form is submitted each time
The first is a form：
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<TITLE>HTML5 Local Storage example</title>
<!--include Bootstrap CSS for layout-->
<link href= "//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel= "stylesheet ">
<body>
<div class= "Container" >
<H1>HTML5 Local Storage example<form method= "POST" class= "Form-horizontal" >
<fieldset>
<legend>enquiry form</legend>
<div class= "Control-group" >
<label class= "Control-label" for= "type" >type of enquiry</label>
<div class= "Controls" >
<select name= "type" id= "type" >
<option value= "" >please select</option>
<option value= "General" >General</option>
<option value= "Sales" >Sales</option>
<option value= "Support" >Support</option>
</select>
</div>
</div>
<div class= "Control-group" >
<label class= "Control-label" for= "name" >Name</label>
<div class= "Controls" >
<input class= "Input-xlarge" type= "text" name= "name" id= "name" value= "" maxlength= ">
</div>
</div>
<div class= "Control-group" >
<label class= "Control-label" for= "email" >email address</label>
<div class= "Controls" >
<input class= "Input-xlarge" type= "text" name= "email" id= "email" value= "" maxlength= ">
</div>
</div>
<div class= "Control-group" >
<label class= "Control-label" for= "message" >Message</label>
<div class= "Controls" >
<textarea class= "Input-xlarge" name= "message" id= "message" ></textarea>
</div>
</div>
<div class= "Control-group" >
<div class= "Controls" >
<label class= "checkbox" >
<input name= "Subscribe" id= "subscribe" type= "checkbox" >
Subscribe to our Newsletter
</label>
</div>
</div>
</fieldset>
<div class= "Form-actions" >
<input type= "Submit" name= "submit" id= "Submit" value= "Send" class= "btn btn-primary" >
</div>
</form>
</div>
Then the JS part of the code:
Copy Code code as follows:
<script src= "//code.jquery.com/jquery-latest.js" ></script>
<script>
$ (document). Ready (function () {
/*
* Determine whether to support localstorage
*/
if (localstorage) {
/*
* read out the value in the Localstorage
*/
if (Localstorage.type) {
$ ("#type"). Find ("option[value=" + Localstorage.type + "]"). attr ("selected", true);
}
if (localstorage.name) {
$ ("#name"). Val (Localstorage.name);
}
if (localstorage.email) {
$ ("#email"). Val (Localstorage.email);
}
if (localstorage.message) {
$ ("#message"). Val (localstorage.message);
}
if (Localstorage.subscribe = = "Checked") {
$ ("#subscribe"). attr ("Checked", "checked");
}
/*
* When the value in the form changes, the value of the localstorage also changes
*/
$ ("Input[type=text],select,textarea"). Change (function () {
$this = $ (this);
localstorage[$this. attr ("name") = $this. val ();
});
$ ("Input[type=checkbox]"). Change (function () {
$this = $ (this);
localstorage[$this. attr ("name") = $this. attr ("checked");
});
$ ("form")
/*
* Call the Clear method if form is submitted
*/
. Submit (function () {
Localstorage.clear ();
})
. Change (function () {
Console.log (Localstorage);
});
}
});
