html5查询数据库HTML5 创立indexedDB数据库并应用

接下来将和W3C力推的IndexedDB做比较，看看为什么要废弃这种方案。
Web SQL Database 规范中定义的三个核心方法：

openDatabase：这个方法利用现有数据库或新建数据库来创建数据库工具

transaction：这个方法许可我们根据情形掌握事务提交或回滚

executeSql：这个方法用于实行SQL 查询。

openDatabase

我们可以利用这样大略的一条语句，创建或打开一个本地的数据库工具

var db = openDatabase('testDB', '1.0', 'Test DB', 2 1024 1024);

openDatabase吸收五个参数：

数据库名字

数据库版本号

显示名字

数据库保存数据的大小（以字节为单位 )

回调函数（非必须)

如果供应了回调函数，回调函数用以调用 changeVersion() 函数，不管给定什么样的版本号，回调函数将把数据库的版本号设置为空。
如果没有供应回调函数，则以给定的版本号创建数据库。

transaction方法用以处理事务，当一条语句实行失落败的时候，全体事务回滚。
方法有三个参数

包含事务内容的一个方法

实行成功回调函数（可选）

实行失落败回调函数（可选）

db.transaction(function (context) {

这个例子中，中我们创建了一个table，并在表中插入三条数据，四条实行语句任何一条涌现缺点，全体事务都会回滚

executeSql方法用以实行SQL语句，返回结果，方法有四个参数

查询字符串

用以更换查询字符串中问号的参数

实行成功回调函数（可选）

实行失落败回调函数（可选）

db.transaction(function (context) {

由于Web SQL Database规范已经被废弃，缘故原由说的很清楚，当前的SQL规范采取SQLite的SQL方言，而作为一个标准，这是不可接管的，每个浏览器都有自己的实现这还搞毛的标准。
这样浏览器兼容性就不主要了，估计逐步会被遗忘。

视频加载中...

indexedDB——浏览器里边的内置数据库

IndexedDB是HTML5规范里新涌现的浏览器里内置的数据库。
对付在浏览器里存储数据，你可以利用cookies或local storage，但它们都是比较大略的技能，而IndexedDB供应了类似数据库风格的数据存储和利用办法。
存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。
IndexedDB里供应了查询数据的功能，在online和offline模式下都能利用。
你可以用IndexedDB存储大型数据。

IndexedDB里数据以工具的形式存储，每个工具都有一个key值索引。
IndexedDB里的操作都是事务性的。
一种工具存储在一个objectStore里，objectStore就相称于关系数据库里的表。
IndexedDB可以有很多objectStore，objectStore里可以有很多工具。
每个工具可以用key值获取。

1、indexedDB VS LocalStorage

IndexedDB和LocalStorage都是用来在浏览器里存储数据，但它们利用不同的技能，有不同的用场，你须要根据自己的情形适当的选择利用哪种。
LocalStorage是用key-value键值模式存储数据，但跟IndexedDB不一样的是，它的数据并不是按工具形式存储。
它存储的数据都是字符串形式。
如果你想让LocalStorage存储工具，你须要借助JSON.stringify()能将工具变成字符串形式，再用JSON.parse()将字符串还原成工具。
但如果要存储大量的繁芜的数据，这并不是一种很好的方案。
毕竟，localstorage便是专门为小数量数据设计的，它的api是同步的。

IndexedDB很适宜存储大量数据，它的API是异步调用的。
IndexedDB利用索引存储数据，各种数据库操作放在事务中实行。
IndexedDB乃至还支持大略的数据类型。
IndexedDB比localstorage强大得多，但它的API也相对繁芜。

对付大略的数据，你该当连续利用localstorage，但当你希望存储大量数据时，IndexedDB会明显的更适宜，IndexedDB能供应你更为繁芜的查询数据的办法。

2、IndexedDB vs Web SQL

WebSQL也是一种在浏览器里存储数据的技能，跟IndexedDB不同的是，IndexedDB更像是一个NoSQL数据库，而WebSQL更像是关系型数据库，利用SQL查询数据。
W3C已经不再支持这种技能。
由于不再支持上面也大致剖析了其用法，也就不再赘诉。

3、IndexedDB vs Cookies

Cookies(小甜点)听起来很好吃，但实际上并不是。
每次HTTP接管和发送都会通报Cookies数据，它会占用额外的流量。
例如，如果你有一个10KB的Cookies数据，发送10次要求，那么，总计就会有100KB的数据在网络上传输。
Cookies只能是字符串。
浏览器里存储Cookies的空间有限，很多用户禁止浏览器利用Cookies。
以是，Cookies只能用来存储小量的非关键的数据。

4、IndexedDB的用法

想要理解这个API，最好的方法是创建一个大略的web运用：比如把你们班的学生的学号和姓名存储在IndexedDB里。
IndexedDB里供应了大略的增、删、改、查接口。

(1)、浏览器是否支持：

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

if(!window.indexedDB){

(2)、创建

一旦你的浏览器支持IndexedDB，我们就可以打开它。
但不能直接打开IndexedDB数据库。
IndexedDB须要你创建一个要求来打开它。

var request = window.indexedDB.open(\公众testDB\"大众, 2);//第一个参数是数据库的名称，第二个参数是数据库的版本号。
版本号可以在升级数据库时用来调度数据库构造和数据

但你增加数据库版本号时，会触发onupgradeneeded事宜，这时可能会涌现成功、失落败和阻挡事宜三种情形。

var db;

(3)增——往ObjectStore里新增工具

//为了往数据库里新增数据，我们首先须要创建一个事务，并哀求具有读写权限。
在indexedDB里任何的存取工具的操作都须要放在事务里实行。
var transaction = db.transaction([\公众students\"大众],\公众readwrite\公众);

(4)删——ObjectStore里删除工具

//删除跟新增一样，须要创建事务，然后调用删除接口，通过key删除工具。
db.transaction([\"大众students\公众],\"大众readwrite\"大众).objectStore(\公众students\公众).delete(rollNo);

(5)查——通过key取出工具，即往get()方法里传入工具的key值，取出相应的工具。

var request = db.transaction([\"大众students\"大众],\"大众readwrite\"大众).objectStore(\"大众students\"大众).get(rollNo);

(6)改—— 为了更新一个工具，首先要把它取出来，修正，然后再放回去。

var transaction = db.transaction([\"大众students\"大众],\"大众readwrite\"大众);var objectStore = transaction.objectStore(\"大众students\"大众);var request = objectStore.get(rollNo);