IndexDB基本操作

sinb妃
588 阅读12分钟

一、背景

随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。

现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过 4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。

先介绍cookie，localStorage，sessionStorage三种本地存储；

  • cookie：一个保存在客户机中的简单的文本文件, 这个文件与特定的 Web 文档关联在一起, 保存了该客户机访问这个Web 文档时的信息, 当客户机再次访问这个 Web 文档时这些信息可供该文档使用。
  • localStorage：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。属性是只读的。
  • sessionStorage：sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。 Session 这个词的意思，直译过来是“会话”。它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

image.png

二、IndexDB基本特点

  1. 键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以“键值对”的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
  2. 异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
  3. 支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
  4. 同源限制。 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
  5. 储存空间大。 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
  6. 支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

三、IndexDB基本概念

1. 数据库（IDBDatabase）对象

数据库是一系列相关数据的容器。每个域名（严格的说，是协议 + 域名 + 端口）都可以新建任意多个数据库。

IndexedDB 数据库有版本的概念。同一个时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或者主键），只能通过升级数据库版本完成。

2. 对象仓库（object store）： 每个数据库包含若干个对象仓库（object store）。它类似于关系型数据库的表格。

3. 数据记录： 对象仓库保存的是数据记录。每条记录类似于关系型数据库的行，但是只有主键和数据体两部分。主键用来建立默认的索引，必须是不同的，否则会报错。主键可以是数据记录里面的一个属性，也可以指定为一个递增的整数编号。

4. 索引： 为了加速数据的检索，可以在对象仓库里面，为不同的属性建立索引。

1. 事务： 数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件，用来监听操作结果

四、常用操作

1、IDBRequest 对象

IDBRequest 对象表示打开的数据库连接，indexedDB.open()方法和indexedDB.deleteDatabase()方法会返回这个对象。数据库的操作都是通过这个对象完成的。

属性：

  • IDBRequest.readyState：等于pending表示操作正在进行，等于done表示操作正在完成。
  • IDBRequest.result：返回请求的结果。如果请求失败、结果不可用，读取该属性会报错。
  • IDBRequest.error：请求失败时，返回错误对象。
  • IDBRequest.source：返回请求的来源（比如索引对象或 ObjectStore）。
  • IDBRequest.transaction：返回当前请求正在进行的事务，如果不包含事务，返回null。
  • IDBRequest.onsuccess：指定success事件的监听函数。
  • IDBRequest.onerror：指定error事件的监听函数。

2、IDBDatabase

打开数据成功以后，可以从IDBOpenDBRequest对象的result属性上面，拿到一个IDBDatabase对象，它表示连接的数据库。后面对数据库的操作，都通过这个对象完成。

属性：

  • IDBDatabase.name：字符串，数据库名称。
  • IDBDatabase.version：整数，数据库版本。数据库第一次创建时，该属性为空字符串。
  • IDBDatabase.objectStoreNames：DOMStringList 对象（字符串的集合），包含当前数据的所有 object store 的名字。
  • IDBDatabase.onabort：指定 abort 事件（事务中止）的监听函数。
  • IDBDatabase.onclose：指定 close 事件（数据库意外关闭）的监听函数。
  • IDBDatabase.onerror：指定 error 事件（访问数据库失败）的监听函数。
  • IDBDatabase.onversionchange：数据库版本变化时触发（发生upgradeneeded事件，或调用indexedDB.deleteDatabase()）。

方法：

  • IDBDatabase.close()：关闭数据库连接，实际会等所有事务完成后再关闭。
  • IDBDatabase.createObjectStore()：创建存放数据的对象仓库，类似于传统关系型数据库的表格，返回一个 IDBObjectStore 对象。该方法只能在versionchange事件监听函数中调用。
  • IDBDatabase.deleteObjectStore()：删除指定的对象仓库。该方法只能在versionchange事件监听函数中调用。
  • IDBDatabase.transaction()：返回一个 IDBTransaction 事务对象。

3、IDBObjectStore对象

IDBObjectStore 对象对应一个对象仓库（object store）。IDBDatabase.createObjectStore()方法返回的就是一个 IDBObjectStore 对象。

IDBDatabase 对象的transaction()返回一个事务对象，该对象的objectStore()方法返回 IDBObjectStore 对象，因此可以采用下面的链式写法。

** 属性：**

  • IDBObjectStore.indexNames：返回一个类似数组的对象（DOMStringList），包含了当前对象仓库的所有索引。
  • IDBObjectStore.keyPath：返回当前对象仓库的主键。
  • IDBObjectStore.name：返回当前对象仓库的名称。
  • IDBObjectStore.transaction：返回当前对象仓库所属的事务对象。
  • IDBObjectStore.autoIncrement：布尔值，表示主键是否会自动递增。

方法：

  • IDBObjectStore.add()用于向对象仓库添加数据，返回一个 IDBRequest 对象。该方法只用于添加数据，如果主键相同会报错，因此更新数据必须使用put()方法。
  • IDBObjectStore.put()方法用于更新某个主键对应的数据记录，如果对应的键值不存在，则插入一条新的记录。该方法返回一个 IDBRequest 对象。
  • IDBObjectStore.clear()删除当前对象仓库的所有记录。该方法返回一个 IDBRequest 对象。
  • IDBObjectStore.delete()方法用于删除指定主键的记录。该方法返回一个 IDBRequest 对象。
  • IDBObjectStore.count()方法用于计算记录的数量。该方法返回一个 IDBRequest 对象。
  • IDBObjectStore.getKey()用于获取主键。该方法返回一个 IDBRequest 对象。
  • IDBObjectStore.get()用于获取主键对应的数据记录。该方法返回一个 IDBRequest 对象。
  • IDBObjectStore.getAll()用于获取对象仓库的记录。该方法返回一个 IDBRequest 对象。
  • IDBObjectStore.getAllKeys()用于获取所有符合条件的主键。该方法返回一个 IDBRequest 对象。
  • IDBObjectStore.index()方法返回指定名称的索引对象 IDBIndex。
  • IDBObjectStore.createIndex()方法用于新建当前数据库的一个索引。该方法只能在VersionChange监听函数里面调用。
  • IDBObjectStore.deleteIndex()方法用于删除指定的索引。该方法只能在VersionChange监听函数里面调用。
  • IDBObjectStore.openCursor()用于获取一个指针对象。指针对象可以用来遍历数据。该对象也是异步的，有自己的success和error事件，可以对它们指定监听函数。
  • IDBObjectStore.openKeyCursor()用于获取一个主键指针对象。

4、IDBTransaction 对象

IDBTransaction 对象用来异步操作数据库事务，所有的读写操作都要通过这个对象进行。IDBDatabase.transaction()方法返回的就是一个 IDBTransaction 对象。

属性：

  • IDBTransaction.db：返回当前事务所在的数据库对象 IDBDatabase。
  • IDBTransaction.error：返回当前事务的错误。如果事务没有结束，或者事务成功结束，或者被手动终止，该方法返回null。
  • IDBTransaction.mode：返回当前事务的模式，默认是readonly（只读），另一个值是readwrite。
  • IDBTransaction.objectStoreNames：返回一个类似数组的对象 DOMStringList，成员是当前事务涉及的对象仓库的名字。
  • IDBTransaction.onabort：指定abort事件（事务中断）的监听函数。
  • IDBTransaction.oncomplete：指定complete事件（事务成功）的监听函数。
  • IDBTransaction.onerror：指定error事件（事务失败）的监听函数。 方法：
  • IDBTransaction.abort()：终止当前事务，回滚所有已经进行的变更。
  • IDBTransaction.objectStore(name)：返回指定名称的对象仓库 IDBObjectStore。

5、IDBIndex 对象

IDBObjectStore.index()方法可以获取 IDBIndex 对象。

IDBIndex 对象代表数据库的索引，通过这个对象可以获取数据库里面的记录。数据记录的主键默认就是带有索引，IDBIndex 对象主要用于通过除主键以外的其他键，建立索引获取对象。

IDBIndex 是持久性的键值对存储。只要插入、更新或删除数据记录，引用的对象库中的记录，索引就会自动更新。

属性：

  • IDBIndex.name：字符串，索引的名称。
  • IDBIndex.objectStore：索引所在的对象仓库。
  • IDBIndex.keyPath：索引的主键。
  • IDBIndex.multiEntry：布尔值，针对keyPath为数组的情况，如果设为true，创建数组时，每个数组成员都会有一个条目，否则每个数组都只有一个条目。
  • IDBIndex.unique：布尔值，表示创建索引时是否允许相同的主键。
  • IDBIndex 对象有以下方法，它们都是异步的，立即返回的都是一个 IDBRequest 对象。
  • IDBIndex.count()：用来获取记录的数量。它可以接受主键或 IDBKeyRange 对象作为参数，这时只返回符合主键的记录数量，否则返回所有记录的数量。
  • IDBIndex.get(key)：用来获取符合指定主键的数据记录。
  • IDBIndex.getKey(key)：用来获取指定的主键。
  • IDBIndex.getAll()：用来获取所有的数据记录。它可以接受两个参数，都是可选的，第一个参数用来指定主键，第二个参数用来指定返回记录的数量。如果省略这两个参数，则返回所有记录。由于获取成功时，浏览器必须生成所有对象，所以对性能有影响。如果数据集比较大，建议使用 IDBCursor 对象。
  • IDBIndex.getAllKeys()：该方法与IDBIndex.getAll()方法相似，区别是获取所有主键。
  • IDBIndex.openCursor()：用来获取一个 IDBCursor 对象，用来遍历索引里面的所有条目。
  • IDBIndex.openKeyCursor()：该方法与IDBIndex.openCursor()方法相似，区别是遍历所有条目的主键。 方法：
  • IDBIndex.count()：用来获取记录的数量。它可以接受主键或 IDBKeyRange 对象作为参数，这时只返回符合主键的记录数量，否则返回所有记录的数量。
  • IDBIndex.get(key)：用来获取符合指定主键的数据记录。
  • IDBIndex.getKey(key)：用来获取指定的主键。
  • IDBIndex.getAll()：用来获取所有的数据记录。它可以接受两个参数，都是可选的，第一个参数用来指定主键，第二个参数用来指定返回记录的数量。如果省略这两个参数，则返回所有记录。由于获取成功时，浏览器必须生成所有对象，所以对性能有影响。如果数据集比较大，建议使用 IDBCursor 对象。
  • IDBIndex.getAllKeys()：该方法与IDBIndex.getAll()方法相似，区别是获取所有主键。
  • IDBIndex.openCursor()：用来获取一个 IDBCursor 对象，用来遍历索引里面的所有条目。
  • IDBIndex.openKeyCursor()：该方法与IDBIndex.openCursor()方法相似，区别是遍历所有条目的主键。

6、IDBCursor 对象

IDBCursor 对象一般通过IDBObjectStore.openCursor()方法获得。IDBCursor 对象代表指针对象，用来遍历数据仓库（IDBObjectStore）或索引（IDBIndex）的记录。

属性：

  • IDBCursor.source：返回正在遍历的对象仓库或索引。
  • IDBCursor.direction：字符串，表示指针遍历的方向。共有四个可能的值：next（从头开始向后遍历）、nextunique（从头开始向后遍历，重复的值只遍历一次）、prev（从尾部开始向前遍历）、prevunique（从尾部开始向前遍历，重复的值只遍历一次）。该属性通过IDBObjectStore.openCursor()方法的第二个参数指定，一旦指定就不能改变了。
  • IDBCursor.key：返回当前记录的主键。
  • IDBCursor.value：返回当前记录的数据值。
  • IDBCursor.primaryKey：返回当前记录的主键。对于数据仓库（objectStore）来说，这个属性等同于 IDBCursor.key；对于索引，IDBCursor.key 返回索引的位置值，该属性返回数据记录的主键。 方法：
  • IDBCursor.advance(n)：指针向前移动 n 个位置。
  • IDBCursor.continue()：指针向前移动一个位置。它可以接受一个主键作为参数，这时会跳转到这个主键。
  • IDBCursor.continuePrimaryKey()：该方法需要两个参数，第一个是key，第二个是primaryKey，将指针移到符合这两个参数的位置。
  • IDBCursor.delete()：用来删除当前位置的记录，返回一个 IDBRequest 对象。该方法不会改变指针的位置。
  • IDBCursor.update()：用来更新当前位置的记录，返回一个 IDBRequest 对象。它的参数是要写入数据库的新的值。

7、IDBKeyRange 对象

IDBKeyRange 对象代表数据仓库（object store）里面的一组主键。根据这组主键，可以获取数据仓库或索引里面的一组记录。

IDBKeyRange 可以只包含一个值，也可以指定上限和下限。它有四个静态方法，用来指定主键的范围。

  • IDBKeyRange.lowerBound()：指定下限。
  • IDBKeyRange.upperBound()：指定上限。
  • IDBKeyRange.bound()：同时指定上下限。
  • IDBKeyRange.only()：指定只包含一个值。

参考链接： www.ruanyifeng.com/blog/2018/0… www.jianshu.com/p/bb116c7a7… wangdoc.com/javascript/…

avatar
文章
阅读
粉丝