前言
IndexDB 是浏览器自带的本地数据库，支持大容量、异步读写、事务操作等特性，是前端存储领域的一大利器。然而，使用 IndexDB API 并不那么简单，有大量冗余的代码需要编写，同时兼容性也是一个难题。
幸运的是，有开发者已经封装了 IndexDB API，提供可扩展的前端存储解决方案，即 - npm 包 indexdb.js。
本文将详细介绍 indexdb.js 的安装、配置及使用，同时深入剖析它的实现原理，供读者参考和学习。
安装与配置
安装
在使用 indexdb.js 之前，需要在本地项目中安装该 npm 包。打开命令行，进入项目根目录，执行以下代码：
npm install indexdb.js --save
配置
安装完成后，需要在项目中引入 indexdb.js 的配置文件。具体实现为：
-- -------------------- ---- ------- -- -- ---------- ------ ------- ---- ------------ -- -- ------- ----- ----- ------- - - ----- ------- -- ----- ------ ---------- -- ------- -------- -- -- ------ ---- ---- -- --------- - ----- -- - --- ---------------- -- -- ------- --
API 详解
IndexDB 核心 API 包括：open、add、put、get、delete 等基础数据库操作方法。此外，indexdb.js 还提供了更为常用且简洁的 CRUD 操作封装方法，接下来一一进行详细讲解。
open
打开数据库，返回 Promise 对象。
语法
db.open()
参数
无。
返回值
Promise 对象。
示例
db.open().then(() => {
console.log('数据库连接成功！')
})add
添加数据，返回 Promise 对象。
语法
db.add(data)
参数
- data：Object，需要添加的数据对象。对象中应含有唯一键名 key 对应的键值。
返回值
Promise 对象。
示例
const data = {
id: 1,
name: 'John'
}
db.add(data).then(() => {
console.log('数据添加成功！')
})update
修改数据，返回 Promise 对象。
语法
db.update(data)
参数
- data：Object，需要修改的数据对象。对象中应含有唯一键名 key 对应的键值。
返回值
Promise 对象。
示例
const data = {
id: 1,
name: 'Tom'
}
db.update(data).then(() => {
console.log('数据修改成功！')
})get
获取数据，返回 Promise 对象。
语法
db.get(id)
参数
- id：任意类型，需要获取的数据 id。
返回值
Promise 对象，resolve 函数返回对应的数据对象。
示例
db.get(1).then(data => {
console.log('获取到的数据：', data)
})remove
删除数据，返回 Promise 对象。
语法
db.remove(id)
参数
- id：任意类型，需要删除的数据 id。
返回值
Promise 对象。
示例
db.remove(1).then(() => {
console.log('数据删除成功！')
})clear
清空存储库，返回 Promise 对象。
语法
db.clear()
参数
无。
返回值
Promise 对象。
示例
db.clear().then(() => {
console.log('存储库已清空！')
})实现原理
在 indexdb.js 中，通过封装 IndexDB 相关 API，提供了更为便捷高效的前端存储方案，在使用时可以极大地减少冗余代码和兼容性问题。
实现中主要用到了 IndexDB 提供的以下 API：
indexedDB.open
打开数据库，返回 IDBOpenDBRequest 对象。
const request = indexedDB.open(name, version)
- name：String，需要打开的数据库名称。
- version：Number，需要打开的数据库版本。
IDBDatabase.createObjectStore
创建数据对象存储空间，返回 IDBObjectStore 对象。
const store = db.createObjectStore(name, options)
- name：String，需要创建的数据对象存储空间名称。
- options：Object，数据对象存储空间的配置项，包括 keyPath、autoIncrement 等属性。
IDBTransaction
事务操作，实现 ACID 特性。
const objectStore = transaction.objectStore(name) // 获取数据对象存储空间 const request = objectStore.xxx() // 执行相应操作并返回对应的 IDBRequest 对象
值得注意的是，IndexDB API 仅支持异步操作，我们需要借助 Promise 对象使用 async 和 await 解决异步编程问题。
const request = objectStore.xxx() const data = await request.promisify()
总结
本文介绍了 indexdb.js 的使用及实现原理，通过封装 IndexDB API，提供了高效、便捷的前端存储方案。在使用时，我们只需要关注数据的增删改查，无需再重复书写冗余的 API 代码，同时也有效避免了兼容性等问题。希望本文能够对广大前端开发者提供参考与帮助，同时也能够鼓励大家钻研底层技术实现，不断提高自身技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b681e8991b448dff4b