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

在HTML 5中，localstorage是个不错的东西，在支持localstorage的浏览器中，能持久化用户表单的输入，即使关掉浏览器，下次重新打开浏览器访问，也能读出其值，下面给出的例子是使用jquery 在每次表单加载的时候，读localstorage的值，而在表单每次提交时则清楚其值的例子首先是一个表单：复制代码代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML5 Local Storage Example</title>  <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); }); } });

　　推荐阅读

　　事件冒泡是什么如何用jquery阻止事件冒泡

（1）什么是事件起泡首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。当事件发生后，这个事件就要开始传播。为什么要传播呢？>>>详细阅读

本文标题：使用jquery读取html5 localstorage的值的方法

地址：http://www.17bianji.com/kaifa2/JS/22614.html

1/2 1