在HTML 5中，localstorage是個(gè)不錯(cuò)的東西，在支持localstorage的瀏覽器中，能持久化用戶表單的輸入，即使關(guān)掉瀏覽器，下次重新打開瀏覽器訪問，也能讀出其值,很不錯(cuò)的一個(gè)東西，接下來(lái)實(shí)例介紹，需要的朋友可以參考下

在HTML 5中，localstorage是個(gè)不錯(cuò)的東西，在支持localstorage的瀏覽器中，能持久化用戶表單的輸入，即使關(guān)掉瀏覽器，下次重新打開瀏覽器訪問，也能讀出其值，下面給出的例子是使用jquery 在每次表單加載的時(shí)候，讀localstorage的值，而在表單每次提交時(shí)則清楚其值的例子
首先是一個(gè)表單：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>HTML5 Local Storage Example</title> 
<!-- include Bootstrap CSS for layout --> 
<link  rel="stylesheet"> 
</head> 
<body> 
<div class="container"> 
<h1>HTML5 Local Storage Example</h1> 
<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="50"> 
</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="150"> 
</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> 

然后是js部分代碼：

復(fù)制代碼代碼如下:

 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function () { 
/* 
* 判斷是否支持localstorage 
*/ 
if (localStorage) { 
/* 
* 讀出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"); 
} 
/* 
* 當(dāng)表單中的值改變時(shí),localstorage的值也改變 
*/ 
$("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") 
/* 
* 如果表單提交，則調(diào)用clear方法 
*/ 
.submit(function(){ 
localStorage.clear(); 
}) 
.change(function(){ 
console.log(localStorage); 
}); 
} 
}); 