利用indexDB带你手把手构建一个前端数据库体系

很多时候我们需要把自己做的项目展示给别人看，但是一个完整的项目是需要后端提供数据存储支持的，作为一个前端程序员大多数不具备后端开发的能力，或者没必要花时间和精力来专门搞一个后台服务。因此，能不能利用浏览器提供的 indexDB 来搭建一套数据存储的能力呢？

答案是可以的。 下面我将会带大家从0到1搭建这样一套前端的 MOCK 体系，摆脱对后台的依赖，让前端直接起飞。

什么是 IndexDB ？

IndexDB 是一个运行在浏览器上的非关系型数据库。既然是数据库了，那就不是 5M、10M 这样小打小闹级别了。理论上来说，IndexDB 理论上是没有存储上限的一般来说不会小于 250M。它不仅可以存储字符串，还可以存储二进制数据。

为了后面能看懂代码，这里对 IndexDB 的 api 做一个简要的介绍。

打开数据库

// 打开我们的数据库 使用open方法
let request = window.indexedDB.open("MyTestDatabase");

// 成功
request.onsuccess = (event: any) => {console.log('数据库打开成功')
}

// 错误
request.onerror = function (event) {console.log("error", event);
} 
1
2
3
4
5
6
7
8
9
10

除了成功和错误的事件之外，还有一个 onupgradeneeded 事件， 它表示当你创建一个新的数据库或者增加已存在的数据库的版本号时会被触发。

indexDB第二次参数就是版本号，默认是1，让你写2时就会触发onupgradeneeded事件。

window.indexedDB.open(this.dbName, 2) 
1

创建对象仓库

createObjectStore

这个 api 是为数据库创建一个对象仓库，所谓对象仓库你可以把它理解为一张数据表。

createObjectStore(name, options)函数接收两个参数，第一个参数为仓库的名字，第二个参数是个对象，是可选参数，其中包括以下的属性：

• keyPath：主键
• autoIncrement：boolean类型，键生成器，是否自动生成，默认false

createIndex

我们知道 indexDB 是可以通过索引来高效查找数据的，为对象仓库创建索引使用createIndex, createIndex(name,keypath,options)接受三个参数

• name：索引的名称，可为空
• keypath：索引对应的keyPath
• options：可选，比如：unique：boolean类型，如果为 true，则索引将不允许单个键的重复值

// 创建对象仓库
const store = result.createObjectStore(storeName, {autoIncrement: true,keyPath
})
// 为对象仓库创建索引
indexs.map((v: string) =>// createIndex可以新建索引，unique字段表示该字段的值是否可以重复store.createIndex(v, v, { unique: false })
)
// 创建成功的回调
store.transaction.oncomplete = (e: any) => {console.log('创建对象仓库成功')
} 
1
2
3
4
5
6
7
8
9

增删改查

事务

indexDB 数据的读写和删改，都要通过事务完成。这意味着一系列操作步骤之中&#