本文通过对IndexedDB
的使用方法和使用场景进行相关介绍,对常见的问题进行解答。
同时,因为MDN中的相关文档缺乏相关逻辑性,所以不容易理解。本文将通过项目中常见的数据存储和操作需求来进行内容组织。
读者能够通过本文学会在项目中正确的使用IndexedDB
,给应用带来的本地存储能力,并且避免一些常见的问题。
当我们进行一些较大的SPA页面开发时,我们会需要进行一些数据的本地存储。
当数据量不大时,我们可以通过SessionStorage或者LocalStorage来进行存储,但是当数据量较大,或符合一定的规范时,我们可以使用数据库来进行数据的存储。
在浏览器提供的数据库中,共有web sql
和IndexedDB
两种。相较于HTML5已经废弃的web sql
来说,更推荐大家使用IndexedDB
。
下面,我们通过一张图来了解下,IndexedDB整体的结构。
类比sql
型数据库,IndexedDB
中的DB(数据库)就是sql
中的DB,而Object Store(存储空间)
则是数据表
,Item
则等于表中的一条记录
。
现在,我们将其根据IndexedDB
的结构来对其操作进行介绍,能让大家对这个存储空间有一个初步的了解。我们主要介绍:
数据库操作
数据表操作
数据操作
使用IndexedDB
第一步,就是创建或打开一个数据库。我们使用window.indexedDB.open(DBName)
这个API来打进行操作。具体示例如下:
const request = window.indexedDB.open('test');
request.onupgradeneeded = function (event) {
}
request.onsuccess = function(event) {
//request === event.target;
}
request.onerror = function(event) {}
调用此接口时,如果当前数据库不存在,则会创建一个新的数据库。
当数据库建立连接时,会返回一个IDBOpenDBRequest
对象。
在连接建立成功时,会触发onsuccess
事件,其中函数参数event
的target
属性就是request
对象。
而在数据库创建或者版本更新时,会触发onupgradeneeded
事件。
window.indexedDB.open
的第二个参数即为版本号。在不指定的情况下,默认版本号为1。具体示例如下:
const request = window.indexedDB.open('test', 2);
在需要更新数据库的schema(模式)
时,需要更新版本号。此时我们指定一个高于之前版本的版本号,就会触发onupgradeneeded
事件。类似的,当此数据库不存在时,也会触发此事件并且将版本更新到置顶版本。
我们需要注意的是,版本号是一个Unsigned long long
数字,这意味着它可以是一个非常大的整数。但是,它不能是一个小数,否则它将会被转为最近的整数,同时有可能导致onUpgradeneeded
事件不触发(bug)。
我们使用createObjectStore
来创建一个存储空间。同时,使用createIndex
来创建它的索引。具体示例如下: