html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例


Posted in HTML / CSS onMay 08, 2014

html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比的优势。
webstrange又分为:localstorage,sessionstorage和本地数据库。

接下来我就来一一介绍:

1、localstorage
localstorage 的使用比较简单,方法有:

复制代码
代码如下:

localStorage.setItem(key,value);//保存数据
localStorage.getItem(key);//读取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//删除所有数据
key:localStorage.key(index);//得到某个索引的值

一个小demo来展示功能:

复制代码
代码如下:

(function($){
$(function(){
$.fn.getFormParam=function(){
var serializeObj={};
var array=this.serializeArray();
var str=this.serialize();
$(array).each(function(){
if(serializeObj[this.name]){
if($.isArray(serializeObj[this.name])){
serializeObj[this.name].push(this.value);
}else{
serializeObj[this.name]=[serializeObj[this.name],this.value];
}
}else{
serializeObj[this.name]=this.value;
}
});
return serializeObj;
};</p> <p> var storageFile =JSON.parse(window.localStorage.getItem('demo'));
$.each(storageFile, function(i, val){
$('#demoForm').find('[name="'+i+'"]').val(val);
});</p> <p> $('#demoForm').find('[type="submit"]').on('click', function(){
var data = $('#demoForm').getFormParam();
window.localStorage.setItem('demo', JSON.stringify(data));
return false;
});
});
})(jQuery)

html 代码:

复制代码
代码如下:

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<script src="jquery-1.10.2.min.js"></script>
<script src="demo.js"></script>
<title>Document</title>
</head>
<body>
<form id="demoForm">
<p><label><span>姓名</span><input name="name"></label></p>
<p><label><span>年龄</span><input name="age"></label></p>
<p><label><span>学号</span><input name="number"></label></p>
<p><label><span>地址</span><input name="address"></label></p>
<p><label><span>爱好</span><input name="habit"></label></p>
<p><label><span>其他</span><textarea name="big" id="" cols="30" rows="10"></textarea></label></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>

这样,一个简单的展示localstorage 的 demo就实现了

2、sessionStorage
sessionStorage用法与localStorage用法相同,不过sessionStorage在浏览器关闭网站时候就会清除,而localStorage会一直保存至浏览器中,二者酌情配合使用。

3、本地数据库
熟悉IOS/Android开发的同学,应该会对SQLite数据库比较熟悉
html5中对数据库的操作比较简单,主要有openDatabase方法和transaction方法
用一个对象db来接收openDatabase创建的访问数据库的对象

复制代码
代码如下:

var db = openDatabase(databasename,version,description,size)

其中
databasename:数据库名
version:数据库版本 可不填
desription:数据库描述
size:数据库分配空间大小
 
transaction方法用一个回调函数作为参数,在函数中执行具体的访问数据库的方法

复制代码
代码如下:

db.transaction(function(tx)){
tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
});

executeSql方法的四个参数分别是:

sqlQuery:需要具体执行的sql语句,create||select||update||delete;

[value1,value2..]:sql语句中所有使用到的参数的数组,在executeSql方法中,将sql语句中所要使用的参数先用“?”代替,然后依次将这些参数组成数组放在第二个参数中;

dataHandler:执行成功回调函数;

errorHandler:执行失败回调函数;

HTML / CSS 相关文章推荐
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 #HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 #HTML / CSS
html5实现canvas阴影效果示例
May 07 #HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 #HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 #HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 #HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 #HTML / CSS
You might like
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
php中使用websocket详解
2016/09/23 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python实现抖音点赞功能
2019/04/07 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
为什么相对PHP黑python的更少
2020/06/21 Python
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
幼师专业毕业生自荐信
2013/09/29 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
德劲DE1105机评
2022/04/05 无线电