微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

html5本地存储之localstorage 、本地数据库、session

发布时间:2017-05-13 来源:未知 点击:
点评:这篇文章主要介绍了html5本地存储的localstorage 、本地数据库、sessionStorage简单使用示例,需要的朋友可以参考下

html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比的优势。yg5HTML5中文学习网 - HTML5先行者学习网
webstrange又分为:localstorage,sessionstorage和本地数据库。yg5HTML5中文学习网 - HTML5先行者学习网
yg5HTML5中文学习网 - HTML5先行者学习网
接下来我就来一一介绍:yg5HTML5中文学习网 - HTML5先行者学习网
yg5HTML5中文学习网 - HTML5先行者学习网
1、localstorage yg5HTML5中文学习网 - HTML5先行者学习网
localstorage 的使用比较简单,方法有:yg5HTML5中文学习网 - HTML5先行者学习网


代码如下:yg5HTML5中文学习网 - HTML5先行者学习网
localStorage.setItem(key,value);//保存数据yg5HTML5中文学习网 - HTML5先行者学习网
localStorage.getItem(key);//读取数据yg5HTML5中文学习网 - HTML5先行者学习网
localStorage.removeItem(key);//删除单个数据yg5HTML5中文学习网 - HTML5先行者学习网
localStorage.clear();//删除所有数据yg5HTML5中文学习网 - HTML5先行者学习网
key:localStorage.key(index);//得到某个索引的值yg5HTML5中文学习网 - HTML5先行者学习网
yg5HTML5中文学习网 - HTML5先行者学习网

一个小demo来展示功能:yg5HTML5中文学习网 - HTML5先行者学习网


代码如下:yg5HTML5中文学习网 - HTML5先行者学习网
(function($){yg5HTML5中文学习网 - HTML5先行者学习网
$(function(){yg5HTML5中文学习网 - HTML5先行者学习网
$.fn.getFormParam=function(){yg5HTML5中文学习网 - HTML5先行者学习网
var serializeObj={};yg5HTML5中文学习网 - HTML5先行者学习网
var array=this.serializeArray();yg5HTML5中文学习网 - HTML5先行者学习网
var str=this.serialize();yg5HTML5中文学习网 - HTML5先行者学习网
$(array).each(function(){yg5HTML5中文学习网 - HTML5先行者学习网
if(serializeObj[this.name]){yg5HTML5中文学习网 - HTML5先行者学习网
if($.isArray(serializeObj[this.name])){yg5HTML5中文学习网 - HTML5先行者学习网
serializeObj[this.name].push(this.value);yg5HTML5中文学习网 - HTML5先行者学习网
}else{yg5HTML5中文学习网 - HTML5先行者学习网
serializeObj[this.name]=[serializeObj[this.name],this.value];yg5HTML5中文学习网 - HTML5先行者学习网
}yg5HTML5中文学习网 - HTML5先行者学习网
}else{yg5HTML5中文学习网 - HTML5先行者学习网
serializeObj[this.name]=this.value;yg5HTML5中文学习网 - HTML5先行者学习网
}yg5HTML5中文学习网 - HTML5先行者学习网
});yg5HTML5中文学习网 - HTML5先行者学习网
return serializeObj;yg5HTML5中文学习网 - HTML5先行者学习网
};</p><p> var storageFile =JSON.parse(window.localStorage.getItem('demo'));yg5HTML5中文学习网 - HTML5先行者学习网
$.each(storageFile, function(i, val){yg5HTML5中文学习网 - HTML5先行者学习网
$('#demoForm').find('[name="'+i+'"]').val(val);yg5HTML5中文学习网 - HTML5先行者学习网
});</p><p> $('#demoForm').find('[type="submit"]').on('click', function(){yg5HTML5中文学习网 - HTML5先行者学习网
var data = $('#demoForm').getFormParam();yg5HTML5中文学习网 - HTML5先行者学习网
window.localStorage.setItem('demo', JSON.stringify(data));yg5HTML5中文学习网 - HTML5先行者学习网
return false;yg5HTML5中文学习网 - HTML5先行者学习网
});yg5HTML5中文学习网 - HTML5先行者学习网
});yg5HTML5中文学习网 - HTML5先行者学习网
})(jQuery)yg5HTML5中文学习网 - HTML5先行者学习网
yg5HTML5中文学习网 - HTML5先行者学习网

html 代码:yg5HTML5中文学习网 - HTML5先行者学习网


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

这样,一个简单的展示localstorage 的 demo就实现了yg5HTML5中文学习网 - HTML5先行者学习网

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

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


代码如下:yg5HTML5中文学习网 - HTML5先行者学习网
var db = openDatabase(databasename,version,description,size)yg5HTML5中文学习网 - HTML5先行者学习网
yg5HTML5中文学习网 - HTML5先行者学习网

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


代码如下:yg5HTML5中文学习网 - HTML5先行者学习网
db.transaction(function(tx)){yg5HTML5中文学习网 - HTML5先行者学习网
tx.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)yg5HTML5中文学习网 - HTML5先行者学习网
});yg5HTML5中文学习网 - HTML5先行者学习网
yg5HTML5中文学习网 - HTML5先行者学习网

executeSql方法的四个参数分别是:yg5HTML5中文学习网 - HTML5先行者学习网

sqlQuery:需要具体执行的sql语句,create||select||update||delete;yg5HTML5中文学习网 - HTML5先行者学习网

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

dataHandler:执行成功回调函数;yg5HTML5中文学习网 - HTML5先行者学习网

errorHandler:执行失败回调函数;yg5HTML5中文学习网 - HTML5先行者学习网

yg5HTML5中文学习网 - HTML5先行者学习网

这就是微学网-程序员之家为你提供的"html5本地存储之localstorage 、本地数据库、session"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/6774.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 | 学习教程 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟学习网,提供各类程序编程入门,技巧