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 translate完美实现表头固定效果
Feb 28 HTML / CSS
css3绘制百度的小度熊
Oct 29 HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 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在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
yii上传文件或图片实例
2014/04/01 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
jquery 常用操作方法
2010/01/28 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
vue接口请求加密实例
2020/08/11 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
详解Python字符串对象的实现
2015/12/24 Python
python浪漫表白源码
2019/04/05 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
python函数的作用域及关键字详解
2019/08/20 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
电脑饰品店的创业计划书
2014/01/21 职场文书
志愿者活动总结
2014/04/28 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
检讨书范文大全
2015/05/07 职场文书
贫困证明书范文
2015/06/16 职场文书
计算机教师工作总结
2015/08/13 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL