IndexedDB使用与出坑指南

概述

本文通过对IndexedDB的使用方法和使用场景进行相关介绍，对常见的问题进行解答。

同时，因为MDN中的相关文档缺乏相关逻辑性，所以不容易理解。本文将通过项目中常见的数据存储和操作需求来进行内容组织。

读者能够通过本文学会在项目中正确的使用IndexedDB，给应用带来的本地存储能力，并且避免一些常见的问题。

原因：开发者需要在本地进行永久存储

当我们进行一些较大的SPA页面开发时，我们会需要进行一些数据的本地存储。

当数据量不大时，我们可以通过SessionStorage或者LocalStorage来进行存储，但是当数据量较大，或符合一定的规范时，我们可以使用数据库来进行数据的存储。

在浏览器提供的数据库中，共有web sql和IndexedDB两种。相较于HTML5已经废弃的web sql来说，更推荐大家使用IndexedDB。

结构

下面，我们通过一张图来了解下，IndexedDB整体的结构。

类比sql型数据库，IndexedDB中的DB（数据库）就是sql中的DB，而Object Store(存储空间)则是数据表,Item则等于表中的一条记录。

使用IndexedDB

现在，我们将其根据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来创建它的索引。具体示例如下：

<