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新特性应用之视觉效果实例
Dec 12 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
详解CSS玩转图片Base64编码
May 25 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 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模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
浅析php学习的路线图
2013/07/10 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
php数组和链表的区别总结
2019/09/20 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
文本加密解密
2006/06/23 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
python编写Logistic逻辑回归
2020/12/30 Python
用python制作游戏外挂
2018/01/04 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
2014端午节活动策划方案
2014/01/27 职场文书
暑期社会实践方案
2014/02/05 职场文书
小学生元旦感言
2014/02/26 职场文书
化工操作工岗位职责
2014/04/29 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
安全保证书怎么写
2015/02/28 职场文书
社区敬老月活动总结
2015/05/07 职场文书
身份证丢失证明
2015/06/19 职场文书