使用jquery读取html5 localstorage的值的方法

tangfenjuan

2013-01-04

在HTML 5中，localstorage是个不错的东西，在支持localstorage的浏览器中，能持久化用户表单的输入，即使关掉浏览器，下次重新打开浏览器访问，也能读出其值，下面给出的例子是使用jquery 在每次表单加载的时候，读localstorage的值，而在表单每次提交时则清楚其值的例子
首先是一个表单：

代码如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<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"> 
</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部分代码：

代码如下：

<script src="//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"); 
} 
/* 
* 当表单中的值改变时,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") 
/* 
* 如果表单提交，则调用clear方法 
*/ 
.submit(function(){ 
localStorage.clear(); 
}) 
.change(function(){ 
console.log(localStorage); 
}); 
} 
});

localstorage html5 jquery label