indexeddb：浏览器中的数据库
- 2019 年 10 月 21 日
- 筆記
随着浏览器功能的不断加强，越来越多的网站开始考虑将大量的数据存储在客户端。这样的考虑是为了直接从本地获取数据，减少从服务器获取数据耗费的网络资源。
原有的浏览器数据存储方案都不适合存储大量数据。Cookie的大小不超过4KB，且每次请求都会发送会服务器；WebStorage（LocalStorage、SessionStorage）的大小在2.5MB到10MB之间（各家浏览器不同，一般可以认为是5MB左右），而且不提供搜索功能，也不能建立自定义的索引。因此IndexedDB就诞生了，是H5提供的一种新的浏览器存储解决方案。
什么IndexedDB
通俗地说，IndexedDB就是浏览器提供的一个本地数据库，可以被网页脚本创建和操作。IndexedDB允许存储大量的数据，同时提供查找借口，还能创建索引。而这些都是Cookie和WebStorage所不具备的。就数据库而言，IndexedDB不属于关系型数据库（不支持SQL查询语句），更接近与NoSQL数据库。
Indexed具有以下特点：
1.键值对存储。IndexedDB内部采用对象仓库（Object Store）存放数据。所有类型的数据都可以直接存入，包括JavaScript对象。在对象仓库中，数据以键值对的形式保存，每一个数据记录都有对应的主键，且这个主键是唯一的，一旦重复就会抛出错误。
2.异步。IndexedDB操作的时候不会锁死浏览器（线程不会挂起），用户依然可以进行其他操作。这与LocalStorage形成对比，后者的操作是同步的（线程会挂起）。异步的设计是为了防止大量数据的读写拖慢网页的表现性能。
3.支持事务。IndexedDB是支持事务（Transaction）的。这就意味着，一系列的操作中只要有一个步骤失败，整个事务就会取消，数据库也会回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
4.同源策略。IndexedDB受浏览器同源策略的限制，每一个数据库都对应创建它的域名。网页只能访问自身域名下的数据库，不能访问跨域的数据库。
5.存储空间大。IndexedDB的存储空间比WebStorage要大得多，一般来说不小于250MB，甚至没有上限。
6.支持二进制存储。IndexedDB不仅可以存储字符串，还可以存储二进制数据（ArrayBuffer和Blob对象）。
Indexed中的一些主要概念
IndexedDB是一个比较复杂的API，涉及到不少概念。它把不同的实体抽象成一个个对象接口。学习这个API实际上就是学习它提供的各种对象接口。
| 数据库 | IDBDatabase对象 |
| 对象仓库 | IDBObjectStore对象 |
| 索引 | IDBIndex对象 |
| 事务 | IDBTransaction对象 |
| 操作请求 | IDBRequest对象 |
| 指针 | IDBCursor对象 |
| 主键集合 | IDBKeyRange对象 |
下面对一些主要概念进行说明：
1.数据库。数据库是一系列相关数据的容器。每个域名都可以新建任意多个数据库。另外，在IndexedDB数据库中有版本的概念，在同一时刻只能有一个版本的数据库存在。如果要修改数据库的结构（新增表或删除表、索引和主键），只能通过升级数据库版本完成。
2.对象仓库。每个数据库包含若干个对象仓库，类似于关系型数据库的表格。
3.数据记录。对象仓库保存的是数据记录。每条记录类似于关系型数据库的行，但是只有主键和数据体两个部分。主键用来建立默认的索引，必须是不同的，否则会报错。主键可以是实数据记录里面的一个属性，也可以另外指定为一个递增的整数编号。数据体可以是任意的数据类型，不限于对象。
4.索引。为了加速数据的索引，可以在对象仓库里面为不同的属性建立索引。
5.事务。数据记录的读写和删改，都要通过事务来完成。事务对象提供了error、abort和complete三个事件用来监听操作的结果。
IndexedDB的常用操作
这里给出IndexedDB数据库常用操作的简单示例。
1.打开数据库
使用IndexedDB的第一步是打开数据库，使用indexed.open()方法。
var request = window.indexedDB.open(databaseName, version);
这个方法接受两个参数，第一个参数是字符串，表示数据库名，如果指定的数据库不存在，就会新建一个数据库。第二个参数是整数，表示数据库的版本，如果省略，就会打开现有的数据库版本。在新建数据库的时候，默认版本为1。
这个方法会返回一个IDBRequest对象。这个对象可以通过onerror、onsuccess和onupgradeneeded事件处理打开数据库的操作结果。
onerror事件，表示打开数据库失败。
request.onerror = function (event) { console.log('数据库打开报错'); };
onsuccess事件，表示打开数据库成功。
request.onsuccess = function (event) { var db = request.result; console.log('数据库打开成功', db); };
onupgradeneeded事件，如果指定的版本号大于数据库的实际版本号，就会发生数据库升级事件。
request.onupgradeneeded = function (event) { var db = event.target.result; }
2.新建数据库
新建数据库与打开数据库是同一个操作，如果指定的数据库不存在，就会新建一个数据库。不同之处在于，打开数据库是触发的onsuccess事件，而新建数据库是触发的onupgradeneeded事件，因为这时候版本是从无到有。
通常新建数据库之后的第一件事是新建对象仓库（新建表）。
var db; request.onupgradeneeded = function(event) { db = event.target.result; var objectStore = db.createObjectStore('yanggb', {keyPath: 'id'}); }
上面的代码中，在数据库新建成功后会新增一张叫做yanggb的表，主键是id。
更好的写法是，先判断以下表格是否存在，如果不存在的话再新增。
var db; request.onupgradeneeded = function(event) { db = event.target.result; var objectStore; if (!db.objectStoreNames.contains('yanggb')) { objectStore = db.createObjectStore('yanggb', {keyPath: 'id'}); } }
主键（key）是默认建立索引的属性。如果数据记录没有适合作为主键的属性，也可以让IndexedDB自动生成主键，下面的代码中就指定了主键为一个递增的整数。
var objectStore = db.createObjectStore('yanggb', {autoIncrement: true});
再新建了对象仓库之后，下一步就可以新建索引。
var db; request.onupgradeneeded = function(event) { db = event.target.result; var objectStore; if (!db.objectStoreNames.contains('yanggb')) { objectStore = db.createObjectStore('yanggb', {keyPath: 'id'}); objectStore.createIndex('index_book', 'book', {unique: false}); objectStore.createIndex('index_email', 'email', {unique: true}); } }
IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性和配置对象（说明该属性能否包含重复的值）。
3.新增数据
新增数据指的是向对象仓库中写入数据记录，需要通过事务对象来完成。
function addRecord() { var request = db.transaction(['yanggb'], 'readwrite') .objectStore('yanggb') .add({id: 1, book: '十一种孤独', email: '[email protected]'}); request.onsuccess = function (event) { console.log('数据写入成功！'); }; request.onerror = function (event) { console.log('数据写入失败！'); } }
在上面的代码中，写入数据需要新建一个事务。新建的时候必须要指定表名和操作模式（只读read或者读写readwrite）。新建事务之后就可以通过IDBTransaction.objectStore(name)方法拿到IDBObjectStore对象，然后通过表格对象的add()方法向表格中写入一行记录。
这个写入操作是一个异步操作，通过监听连接对象的success事件和error事件可以了解是否写入成功或做相应的后续操作。
4.读取数据
读取数据同样也是通过事务对象来完成的。
function getRecord() { var transaction = db.transaction(['yanggb']); var objectStore = transaction.objectStore('yanggb'); var request = objectStore.get(1); request.onerror = function(event) { console.log('事务失败'); }; request.onsuccess = function(event) { if (request.result) { console.log('book: ' + request.result.book); console.log('email: ' + request.result.email); } else { console.log('未获得数据记录！'); } }; }
IDBObjectStore.get()方法用于读取数据，接收一个参数，参数是主键的值。
5.遍历数据
如果要遍历数据仓库中的所有数据记录，要使用指针对象IDBCursor。
function getRecords() { var objectStore = db.transaction('yanggb').objectStore('yanggb'); objectStore.openCursor().onsuccess = function (event) { var cursor = event.target.result; if (cursor) { console.log('id: ' + cursor.key); console.log('book: ' + cursor.value.book); console.log('email: ' + cursor.value.email); cursor.continue(); } else { console.log('没有更多数据了！'); } }; }
这里，获取数据记录的操作是在IDBCursor对象中的onsuccess监听事件中完成的。
6.更新数据
更新数据要使用IDBObjectStore对象的put()方法。
function updateRecord() { var request = db.transaction(['yanggb'], 'readwrite') .objectStore('yanggb') .put({id: 1, book: '追风筝的任静', email: '[email protected]'}); request.onsuccess = function (event) { console.log('数据更新成功！'); }; request.onerror = function (event) { console.log('数据更新失败'); } }
上面的代码中，IDBObject.put()方法会自动更新主键为1的记录。
7.删除数据
删除数据要使用IDBObjectStore对象的delete()方法。
function remove() { var request = db.transaction(['yanggb'], 'readwrite') .objectStore('yanggb') .delete(1); request.onsuccess = function (event) { console.log('数据删除成功'); }; }
IDBObjectStore.delete()方法用于删除数据，接受一个参数，参数值为主键的值。
8.使用索引
索引的意义在于可以快速通过任意字段拿到数据记录。如果不建立索引的话，默认只能搜索主键（从主键取值）。在上面新建表格的时候已经对book字段建立了索引，于是可以通过book字段找到对应的数据记录。
function searchRecordByIndexOfBook() { var transaction = db.transaction(['yanggb'], 'readonly'); var store = transaction.objectStore('yanggb'); var index = store.index('book'); var request = index.get('追风筝的任静'); request.onsuccess = function (e) { var result = e.target.result; if (result) { console.log('找到对应数据！'); } else { console.log('未找到对应数据！'); } } }
如果想要了解更多的话，可以查看官网的API：https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API。
“我唱得不够动人你别皱眉。”
