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


Posted in Javascript onJanuary 04, 2013

在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); 
}); 
} 
});
Javascript 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
node.js如何操作MySQL数据库
Oct 29 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 #Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 #Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 #Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 #Javascript
密码强度检测效果实现原理与代码
Jan 04 #Javascript
禁止你的左键复制实用技巧
Jan 04 #Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 #Javascript
You might like
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
javascript的几种写法总结
2016/09/30 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
解析vue中的$mount
2017/12/21 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
临床医师个人自我评价
2014/04/06 职场文书
导师工作推荐信范文
2014/05/17 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
出国留学单位推荐信
2015/03/26 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
使用Springboot实现健身房管理系统
2021/07/01 Java/Android