上一篇：HTML5笔记2——HTML5音/视频标签详解
Web Storage概述
在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storage功能，之前可以使用Cookies在客户端
保存诸如用户名等简单用户信息，但通过长期使用，人们发现使用Cookies存储永久数据存在几个问题。
-
大小：Cookies的大小被限制在4KB
-
带宽：Cookies是随HTTP失误一起被发送的，因此会浪费一部分发送Cookies时使用的带宽
-
复杂性：要正确的操纵Cookies是很困难的。
针对以上问题，HTML5中，重新提供了一中在客户端本地保存数据的功能，他就是Web Storage。
Web Storage功能。
顾名思义，Web Storage功能就是在Web上存储数据的功能，这里的存储是针对客户端本地而言的。具体分为两种：
sessionStorage：将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏
览这个网站所花费的时间。session对象可以用来保存在这段时间内所要保存的任何数据。
localStorage：将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，该数据仍然存在，下一次打开浏览器访问网站时仍然可以
继续使用。localstorage 是通过键值对来存储的。
开发工具我使用HBuilder.exe
新建Test.html页面，代码如下：
<html><head><title></title><meta charset=UTF-8 /><script type=text/javascript>function saveSessiontorage(id) {var targat = document.getElementById(id);var str = targat.value;
sessionStorage.setItem("msg", str);
}function getSessionStorage(id) {var targat = document.getElementById(id);var msg = sessionStorage.getItem("msg");
targat.innerHTML = msg;
}function saveLocalStorage(id) {var targat = document.getElementById(id);var str = targat.value;
localStorage.setItem("msg", str);
}function getLocalStorage(id) {var targat = document.getElementById(id);var msg = localStorage.getItem("msg");
targat.innerHTML = msg;
}</script></head><body><p id=msg></p><input type=text id=txt /><input type=button value=存储数据 onclick=saveSessiontorage('txt') /><input type=button value=读取数据 onclick=getSessionStorage('msg') /><p id=msg1></p><p> <input type=text id=txt1 /></p><input type=button value=Local存储数据 onclick=saveLocalStorage('txt1') /><input type=button value=Local读取数据 onclick=getLocalStorage('msg1') /></body></html>
View Code
localStorage关闭浏览器之后再打开，读取数据依旧存在，而sessionStorage关闭浏览器之后再打开读取数据就不见了。
作为简单数据库来利用
将Web Storage作为简易数据库，如果能解决数据检索，对列进行管理，就可以将Web Storage作为数据库来利用了。
新建Register.html页面，代码如下：
<!DOCTYPE html><html><head><meta charset=UTF-8><title></title><script type=application/javascript>function addUser () {var data=new Object;
data.name=document.getElementById("txtName").value;
data.phone=document.getElementById("txtPhone").value;
data.address=document.getElementById("txtAddress").value;var str=JSON.stringify(data);
localStorage.setItem(data.name,str);
alert("注册成功");
}function search (txt) {var filed=document.getElementById(txt).value;var str=localStorage.getItem(filed);var data=JSON.parse(str);var result="用户名："+data.name+"</br>"+"电话："+data.phone+"</br>"+"地址："+data.address
document.getElementById("txtMsg").innerHTML=result;
}</script></head><body><div>用户名:<input type=text id=txtName /></div><div>电话号码:<input type=text id=txtPhone /></div><div>地址:<input type=text id=txtAddress /></div><div><input type=button value=注册 onclick=addUser()></div><br /><div>用户名：<input type=text id=txtSearch><input type=button value=Search onclick=search('txtSearch')/></div><div id=txtMsg></div></body></html>
View Code
HTML5 本地数据库
在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序性能，减轻了服务器的负担，使用Web时代重新回到了“客户端为重、服务器端为轻”的时代。在HTML5中内置了两种本地数据库，一种为SQLLite，一种为indexedDB。
用executeSql来执行查询
1.transaction.executeSql(sqlquery,[],dataHandler,errorHandler);
2.function dataHandler(transaction,results);
3.function errorHandler(transaction,errmsg);
4.rows.length获取记录的条数
新建SqlTest.html，代码如下：
<!DOCTYPE html><html><head><meta charset=UTF-8><title></title></head><body><script type=application/javascript>var db=openDatabase("mydb","1.0","test db",1024*100); //参数分别为：(数据库名称，版本号，描述，大小) 如果数据库不存在则创建// db.transaction(function(tx) {// tx.executeSql("")// }) transaction.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg,TEXT,createtime INTERGER)",[],function(){},function(){});//参数：(sql语句，sql参数数组，执行成功的回调函数，执行失败的回调函数)</script></body></html>
HTML5 indexedDB数据库
在HTML5中，新增了一种被称为“indexedDB”的数据库，该数据库是一种存储在客户端本地的NoSQL数据库。
新建IndexedDBTest.html，代码如下：
<!DOCTYPE html><html><head><meta charset=UTF-8><title></title><script type=application/javascript>//统一IndexedDB在不同浏览器的实现 window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange; function connDB () {var dbName="indexedDBTest";var dbVersion=1;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
dbConnect.onsuccess=function (e) {
idb=e.target.result;
alert("数据库连接成功！")
}
dbConnect.onerror=function(e){
alert("数据库连接失败！");
}
}</script></head><body><input type=button value=连接数据库 onclick=connDB()/></body></html>
View Code
数据库的版本更新
只是成功链接数据库，我们还不能执行任何数据操作，我们还应该创建相当于关系型数据库中数据表的对象仓库与用于检索数据的索引。
新建versionUpdate.html，代码如下：
<!DOCTYPE html><html><head><meta charset=UTF-8><title></title><script type=application/javascript>//统一IndexedDB在不同浏览器的实现 window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange; function VersionUpdate () {var dbName="indexedDBTest";var dbVersion=2;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
dbConnect.onsuccess=function (e) {
idb=e.target.result;
alert("数据库连接成功！")
}
dbConnect.onerror=function(e){
alert("数据库连接失败！");
}
dbConnect.onupgradeneeded=function(e){
idb=e.target.result;var ts=e.target.transaction;var oldVersion=e.oldVersion;var newVersion=e.newVersion;
alert("数据库更新成功！旧版本号:"+oldVersion+"------新版本号："+newVersion);
}
}</script></head><body><input type=button value=更新数据库 onclick=VersionUpdate() /></body></html>
View Code
创建对象仓库
对于创建对象仓库与索引的操作，我们只能在版本更新事务内部进行，因为在indexedDB API中不允许数据库中的对象仓库在同一个版本中发生改变。
新建createStorge.html，代码如下：
<!DOCTYPE html><html><head><meta charset=UTF-8><title></title><script type=application/javascript>//统一IndexedDB在不同浏览器的实现 window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange; function CreateStorge () {var dbName="indexedDBTest";var dbVersion=2;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
dbConnect.onsuccess=function (e) {
idb=e.target.result;
alert("数据库连接成功！")
}
dbConnect.onerror=function(e){
alert("数据库连接失败！");
}
dbConnect.onupgradeneeded=function(e){
idb=e.target.result;var name="user";var optionParams={keyPath:"userid",autoIncrement:false};var store=idb.createObjectStore(name,optionParams);
alert("对象仓库创建成功!");
}
}</script></head><body><input type=button value=创建对象仓库 onclick=CreateStorge() /></body></html>
View Code
以上就是Web Storage概述和本地数据库的详细内容，更多请关注双恒网络其它相关文章！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » Web Storage概述和本地数据库
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » Web Storage概述和本地数据库
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
