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实现背景模糊的三种方式
Mar 09 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
在CSS中使用when/else的方法
Jan 18 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中文分词 自动获取关键词介绍
2012/11/13 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
php判断目录存在的简单方法
2019/09/26 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
浅析vue数据绑定
2017/01/17 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
六一儿童节主持词
2014/03/21 职场文书
2014年班级工作总结
2014/11/14 职场文书
年终工作总结范文2014
2014/11/27 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS