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

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

首先是一个表单：

HTML5 Local Storage Example

HTML5 Local Storage Example

Enquiry Form

Type of enquiry

Please select

General

Sales

Support

Name

Email Address

Message

Subscribe to our newsletter

然后是js部分代码：

$(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);

});

}

});