时间: 2019-09-13阅读: 127标签: 数据库IndexedDB 是什么

时间: 2019-09-22阅读: 130标签: IndexedDB一、WebSQL

在今世浏览器的本土存款和储蓄方案中,indexedDB 是大器晚成项重大的技术构成,
它是足以在浏览器端使用之处数据库,能够储存多量多少,提供接口来询问,还足以成立目录,这么些都是任何存款和储蓄方案
Cookie 也许 LocalStorage 不或然提供的力量。单从数据库类型来看,IndexedDB
是一个非关系型数据库(不扶植通过 SQL 语句操作)。

WebSQL是后面一个的一个独门模块,是web存款和储蓄格局的风华正茂种,大家调试的时候会时一时看看,只是相同少之又少使用。

IndexedDB 的入眼概念

兼容性:当前唯有Google帮衬,ie和火狐均不支持。

IndexedDB 是叁个比较复杂的 API
组合,学习它的经过就一定于就学它的逐大器晚成对象 API 接口,包含以下这一个( IDB
指当前操作的数据库实例 卡塔尔国:

大家对数据库的相同概念是后端才会跟数据库打交道,实香港行政局地业务性的增加和删除改查。而那边的数据库也区别于真正意义上的数据库。

数据库:IDBDatabase 对象旅社对象: IDBObjectStore 对象索引:IDBIndex
对象事务:IDBTransaction 对象操作伏乞:IDBRequest 对象指针:IDBCursor
对象主键:IDBKeyRange 对象

重在情势:

在这里些 API 中包括部分非常重要概念:

openDatabase:这些主意应用现成的数据库恐怕新建的数据库创制二个数据库对象。transaction:那一个措施让大家能够调整一个业务,以致基于这种景观进行提交或许回滚。executeSql:这些方法用于施行实际的
SQL 查询。

数据库:数据库是具有相关数据的宗旨容器。在同源战略( 合同 + 域名 + 端口
)的前提下,各样域名下得以新建自便多的数据库。IndexedDB
中有版本概念,那就规定了近似时刻下独有多少个本子的数据仓库储存在。对象旅社:对象仓库ObjectStore 在 IndexedDB 中对应的是 MYSQL 中的表
Table。数据:对象货仓中记录的是多少条数据,数据独有主键和数据体七个部分,主键无法又一次,可感觉自增的整数编号可能数额中内定的贰个属性。数据体能够是私行数据类型,不幸免对象。索引:为分化的品质创建目录能够加速数据的索求。事务:数据的
CUEscortD (增加和删除查改State of Qatar 都要透过专业来完成。

openDatabase(卡塔尔国 方法对应的四个参数表达:

因此轻易的相比较图来了解 IndexedDB 的定义:

数据库名称版本号描述文本数据库大小创立回调

登时运维 IndexedDB

transaction推行数据库操作,操作内容就是不奇怪的数据库的增删改查。

在介绍了 IndexedDB 的根本概念之后,能够透过三个归纳实用的 CUENCORED
例子来学学在平时开支中我们是怎么接受 IndexedDB 的,各样 API
细节日后能够渐渐深远学习。

executeSql是推行实际的sql,参数是1.sql语句(大写?),2.语句中的变量,3.实施后的回调,4.

供给的浏览器协理检查:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "教程")'); tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]); //使用外部变量,执行时会将变量数组中的值依次替换前边的问号位置 tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "p查询记录条数: " + len + "/p"; document.querySelector('#status').innerHTML += msg; for (i = 0; i  len; i++){ msg = "pb" + results.rows.item(i).log + "/b/p"; document.querySelector('#status').innerHTML += msg; } }, null); //查询和回调 tx.executeSql('DELETE FROM LOGS WHERE id=1'); //删除 tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]); tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); //更新 tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);});
if(!('indexedDB' in window)){ console.log('当前浏览器支持 IndexedDB'); return;} else { console.log('您的浏览器不支持 IndexedDB') // todo 建议升级或者更换其他浏览器}

基本操作与实际数据库操作基本豆蔻梢头致。

一而再再而三数据库

最后的数目去向,作者明白为只是做有的时候存款和储蓄和大型网址的事务运行存款和储蓄缓存的作用,页面刷新后该库就荒诞不经了。而其本身与关周详据库的定义相比较平日。

// 数据库实例let db;// 数据库打开操作,第一个参数是数据库名称, 第二个参数是数据库版本let DBRequestLink = window.indexedDB.open('dataBaseName', 1)DBRequestLink.onsuccess = function(event) { // 获取数据库实例 db = DBRequestLink.result; // 其他操作};// 这个监听回调触发于数据库首次新建、open数据库时传递新版本(只能比之前传递的版本高)DBRequestLink.onupgradeneeded = function(event) {};

二、IndexedDB

开创数据库的主键和字段

落草背景:

DBOpenRequest.onupgradeneeded = function(event) { let db = event.target.result; // 创建一个数据库存储对象,并指定主键 let objectStore = db.createObjectStore('person', { keyPath: 'id', autoIncrement: true }); /* 定义存储对象的数据项 * 第一个参数是创建的索引名称,可以为空 * 第二个参数是索引使用的关键名称,可以为空 * 第三个参数是可选配置参数,可以不传,常用参数之一就是 unique ,表示该字段是否唯一,不能重复 */ objectStore.createIndex('id', 'id', { unique: true }); objectStore.createIndex('name', 'name'); objectStore.createIndex('age', 'age'); objectStore.createIndex('sex', 'sex');};

乘胜浏览器的法力不断压实,更加的多的网址初始思虑,将多量数码存款和储蓄在客商端,那样能够收缩从服务器获取数据,直接从本土获取数据。现存的浏览器数据存款和储蓄方案,都不切合储存多量数量:Cookie
的高低不超过4KB,且每回须要都会发送回服务器;LocalStorage 在 2.5MB 到
10MB
之间(各家浏览器分歧),并且不提供查找效果,不能够创设自定义的目录。所以,必要豆蔻梢头种新的缓解方案,那就是IndexedDB 诞生的背景。

在上述操作中,大家先定义了上文中涉及的 IDBObjectStore 对象,并点名主键为
id ,随后又经过 createIndex
来成立字段。值得注意的是纵然创制了几个字段,但在 IndexedDb
中数据依旧分为主键 id 和数目主题七个部分,并不会像 MYSQL 中在 Table
中表现四列。

IndexedDB是浏览器提供的本土数据库,
允许积攒大量数码,提供查找接口,还是能建设布局目录。那一个都以 LocalStorage
所不具有的。就数据库类型来说,IndexedDB 不归于关系型数据库(不帮助 SQL
查询语句),更就像 NoSQL 数据库。诞生背景:

向数据库中添扩展少

乘势浏览器的意义不断增进,越多的网址开始思索,将大批量数量存款和储蓄在客商端,那样能够减去从服务器获取数据,直接从当地获取数据。现存的浏览器数据存款和储蓄方案,都不适合积攒大批量多少:Cookie
的深浅不超越4KB,且每趟诉求都会发送回服务器;LocalStorage 在 2.5MB 到
10MB
之间(各家浏览器差异),何况不提供查找效率,无法树立自定义的目录。所以,须求蓬蓬勃勃种新的应用方案,那便是IndexedDB 诞生的背景。

// 这里的 db 就是第二步中的 db 对象, // transaction api 的第一个参数是数据库名称,第二个参数是操作类型let newItem = { id: 1, name: '徐嘻嘻', age: 3, sex: 'female'};let transaction = db.transaction('dataBaseName', "readwrite");// 找到对应的存储对象let objectStore = transaction.objectStore('person');// 添加到数据对象中, 传入javascript对象objectStore.add(newItem);

IndexedDB是浏览器提供的地头数据库,
允许积攒多量数量,提供寻找接口,还可以成立目录。那么些都是 LocalStorage
所不享有的。就数据库类型来说,IndexedDB 不归于关系型数据库(不接济 SQL
查询语句),更近乎 NoSQL 数据库。

新建操作是在新建了贰个 事务( IDBTransaction
对象)的前提下产生的,传入的数码没有须要做任何转变,能够无缝传入
Javascript 对象。

上边介绍的WebSQL也是后生可畏种在浏览器里积攒数据的本事,跟IndexedDB不一致的是,IndexedDB更疑似二个NoSQL数据库,而WebSQL更像是关系型数据库,使用SQL查询数据。

改正数据库中的数据

代码判别当前浏览器是或不是协助indexed db

// 这里的 db 就是第二步中的 db 对象, // 新建事务let transaction = db.transaction('dataBaseName', "readwrite");// 新数据主体let newRecord = { id: 1, name: '徐嘎嘎', age: 5, sex: 'male'};// 打开已经存储的数据对象let objectStore = transaction.objectStore('person');// 获取存储的对应键的存储对象, 传入主键 id,值为 1 let objectStoreRequest = objectStore.get(1);// 获取成功后替换当前数据objectStoreRequest.onsuccess = function(event) { // 数据 var record = objectStoreRequest.result; // 遍历替换 for (let key in newRecord) { if (typeof record[key] != 'undefined' || key !== 'id') { record[key] = newRecord[key]; } } // 更新数据库存储数据 objectStore.put(record);};
var db = { version: 1, // important: only use whole numbers! isSupport: function () {// support indexeddb or not if (!window.indexedDB) return false; return true; }, ...... }

基本思路是创制一个政工,先找到想要纠正的数目宗旨,然后在更新该数据主导内容。
事务成立逻辑相仿,并在创造之后调用事务的 get 和 put 操作。

IndexedDB 具备以下特征:

剔除数据库中的数据

(1)键值对积存。 IndexedDB 内部采取对象酒店(object
store)贮存数据。全体类型的数码都可以一向存入,富含 JavaScript
对象。对象酒馆中,数据以”键值对”的样式保留,每三个数据记录都有相应的主键,主键是惟风度翩翩的,不可能有重新,否则会抛出一个不当。

// 这里的 db 就是第二步中的 db 对象, // 新建事务let transaction = db.transaction('dataBaseName', "readwrite");// 打开已经存储的数据对象let objectStore = transaction.objectStore('person');// 获取存储的对应键的存储对象, 传入主键 id,值为 1 let objectStoreRequest = objectStore.delete(1);

(2)异步。 IndexedDB
操作时不会锁死浏览器,客户仍为能够进行任何操作,那与 LocalStorage
形成对照,前面一个的操作是联合签名的。异步设计是为了防患未然大气数据的读写,拖慢网页的表现。

调用 delete 接口,传入钦定的 id 就可以。

(3)扶持职业。 IndexedDB
支持专门的学问(transaction),这象征风流倜傥层层操作步骤之中,只要有一步退步,整个业务就都收回,数据库回滚到事情产生以前的情景,不真实只改写一些数目标场地。

能够提效的类库

(4)同源约束 IndexedDB
受到同源节制,每三个数据库对应创造它的域名。网页只好访问自个儿域名下的数据库,而不可能访谈跨域的数据库。


从地方的事例中得以看出,每三遍操作须求起码三行代码工夫不辱职分,何况亟需平素维护
DB
的对象引用,制止它被回笼,那样子开辟代码膨胀得太厉害,所以我们在职业中引进别的类库来压缩代码量

(5)累积空间大 IndexedDB 的存款和储蓄空间比 LocalStorage
大得多,平时的话不菲于 250MB,甚至不曾上限。

LocalForage能够内定数量存款和储蓄方案,默许依次为
IndexedDB、WebSQL、LocalStorage,意味着当前 IndexedDB
失效能够有兜底措施。API 简化为 CRUD (
getItem、removeItem、setItem、clear 卡塔尔库大小为 475bPouchdbAPI 简化为
put、get、remove,基于 promise 来检查回笼错误有较好的大错特错日志机制,
如败北,冲突等等,方便调节和测量检验库大小为 255b

(6)扶持二进制积存。 IndexedDB
既可以够积存字符串,还足以积累二进制数据(ArrayBuffer 对象和 Blob
对象)。

那八个类库比较相符我们的开支需要,大家当前利用的是 LocalForage。

IndexedDB的一些基本概念:

结束语

数据库:IDBDatabase 对象指标酒馆:IDBObjectStore 对象索引: IDBIndex
对象事务: IDBTransaction 对象操作乞请:IDBRequest 对象指针: IDBCursor
对象主键集结:IDBKeyRange 对象

在业务支付中,大家都会遇见或多或少的本土存储需要,本文介绍了当中黄金时代种存储方案
IndexedDB 的简练施行。就大家的行使场景来看,IndexedDB
的适用面依旧很广的。寻思到 IE10
也足以扶植,把它实行在其实项目中应当是未曾难点的。

(1)数据库。

数据库是风姿洒脱二种相关数据的器皿。种种域名(严刻的说,是说道 + 域名 +
端口)都足以新建大肆多个数据库。

IndexedDB
数据库有版本的概念。同三个时时,只可以有叁个版本的数据仓库储存在。假诺要改良数据库布局(新扩充或删除表、索引或然主键),只可以通过进级数据库版本完毕。

(2)对象仓库

各样数据库包涵若干个目的仓库(object
store)。它就疑似于关系型数据库的表格。

(3)数据记录

对象酒店保存的是数额记录。每条记下相同于关系型数据库的行,可是独有主键和数据体两片段。主键可以是数量记录里面包车型大巴贰性情子,也得以钦命为一个依次增加的整数编号。

(4)索引

(5)事务

多少记录的读写和删改,都要因此职业达成。事务对象提供error、abort和complete四个事件,用来监听操作结果。

基本操作:

(1)张开数据库

采用 IndexedDB 的首先步是开垦数据库,使用indexedDB.open(卡塔尔国方法。

varrequest =window.indexedDB.open(databaseName, version);

其风流倜傥措施采纳五个参数,第二个参数是字符串,表示数据库的名字。借使钦赐的数据库不设有,就能新建数据库。第三个参数是整数,表示数据库的本子。要是轻巧,张开本来就有数据库时,默以为当前版本;新建数据库时,默以为1。

indexedDB.open(State of Qatar方法再次来到二个 IDBRequest
对象。那几个指标通过三种事件error、success、upgradeneeded,管理展开数据库的`操作结果。

(2)新建数据库

eg:

var db;var objectStore;var request = window.indexedDB.open(databaseName, version);request.onerror = function (event) {}request.onsuccess = function (event) { db = request.result//可以拿到数据库对象}//如果指定的版本号,大于数据库的实际版本号,就会发生数据库升级事件upgradeneededrequest.onupgradeneeded = function (event) { db = event.target.result; if (!db.objectStoreNames.contains('person')) {//判断是否存在 objectStore = db.createObjectStore('person', { keyPath: 'id' });//自动生成主键db.createObjectStore(// 'person',// { autoIncrement: true }//); } //新建索引,参数索引名称、索引所在的属性、配置对象 objectStore.createIndex('email', 'email', { unique: true });}

(3)新添多少

在以上操作的功底上,须求新建三个政工。新建时必得钦点表格名称和操作方式(”只读”或”读写”)。新建事务今后,通过IDBTransaction.objectStore(name卡塔尔国方法,得到IDBObjectStore 对象,再通过表格对象的add(卡塔尔国方法,向表格写入一条记下。

写入操作是叁个异步操作,通过监听连接对象的success事件和error事件,明白是不是写入成功。

eg:

function add() { var request = db.transaction(['person'], 'readwrite') .objectStore('person') .add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' }); request.onsuccess = function (event) { console.log('数据写入成功'); }; request.onerror = function (event) { console.log('数据写入失败'); }}add();

(4)读取数据

永利开户送38元体验金,objectStore.get(卡塔尔(قطر‎方法用于读取数据,参数是主键的值。

eg:

function read() { var transaction = db.transaction(['person']); var objectStore = transaction.objectStore('person'); var request = objectStore.get(1); request.onerror = function(event) { console.log('事务失败'); }; request.onsuccess = function( event) { if (request.result) { console.log('Name: ' + request.result.name); console.log('Age: ' + request.result.age); console.log('Email: ' + request.result.email); } else { console.log('未获得数据记录'); } };}read();

(5)遍历数据

遍历数据表格的具备记录,要运用指针对象
IDBCursor。openCursor(卡塔尔方法是几个异步操作,所以要监听success事件。

function readAll() { var objectStore = db.transaction('person').objectStore('person'); objectStore.openCursor().onsuccess = function (event) { var cursor = event.target.result; if (cursor) { console.log('Id: ' + cursor.key); console.log('Name: ' + cursor.value.name); console.log('Age: ' + cursor.value.age); console.log('Email: ' + cursor.value.email); cursor.continue(); } else { console.log('没有更多数据了!'); } };}readAll();

(6)数据更新

IDBObject.put()方法。

function update() { var request = db.transaction(['person'], 'readwrite') .objectStore('person') .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' }); request.onsuccess = function (event) { console.log('数据更新成功'); }; request.onerror = function (event) { console.log('数据更新失败'); }}update();

(7)数据删除

IDBObjectStore.delete(卡塔尔国方法用于删除记录。

function remove() { var request = db.transaction(['person'], 'readwrite') .objectStore('person') .delete(1); request.onsuccess = function (event) { console.log('数据删除成功'); };}remove();

(8)索引的接收

加多索引后方可应用索引查询数据

var transaction = db.transaction(['person'], 'readonly');var store = transaction.objectStore('person');var index = store.index('name');var request = index.get('李四');request.onsuccess = function (e) { var result = e.target.result; if (result) { // ... } else { // ... }}

三、IndexedDB vs Web SQL

WebSQL也是一种在浏览器里积存数据的手艺,跟IndexedDB分裂的是,IndexedDB更疑似一个NoSQL数据库,而WebSQL更像是关系型数据库,使用SQL查询数据。W3C已经不复扶助webSql这种才干。因为不再扶助方面也大致深入分析了其用法,也就不再赘诉。

相关文章