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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 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
5.PHP的其他功能
2006/10/09 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
PHP实现递归无限级分类
2015/10/22 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
用python对excel查重
2020/12/07 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
计算机专业学生求职信分享
2013/12/15 职场文书
工作疏忽检讨书
2014/01/25 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
让世界充满爱观后感
2015/06/10 职场文书
法人身份证明书
2015/06/18 职场文书