使用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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
js禁止表单重复提交
Aug 29 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
说说Vuex的getters属性的具体用法
Apr 15 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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
谈一谈收音机的高放电路
2021/03/02 无线电
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
vue中轮训器的使用
2019/01/27 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
python实现进程间通信简单实例
2014/07/23 Python
Python自动登录126邮箱的方法
2015/07/10 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python调用自定义函数的实例操作
2019/06/26 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
梅西百货官网:Macy’s
2020/08/04 全球购物
指导教师评语
2014/04/26 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
感谢信的格式
2015/01/21 职场文书
医生个人年终总结
2015/02/28 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
python删除csv文件的行列
2021/04/06 Python