接下来将和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;
onupgradeneeded
事宜在第一次打开页面初始化数据库时会被调用,或在当有版本号变革时。以是,你该当在onupgradeneeded
函数里创建你的存储数据。如果没有版本号变革,而且页面之前被打开过,你会得到一个onsuccess
事宜。如果有缺点发生时则触发onerror
事宜。如果你之前没有关闭连接,则会触发onblocked
事宜。(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);