在前端开发中，使用 localStorage 等浏览器本地存储数据已经是大家很熟悉的操作。但是 localStorage 的存储空间有限，而且并不能跨域访问。这时候，我们就需要使用浏览器提供的IndexedDB进行数据存储，而 npm 包 web-db-extension 就是一个方便使用 IndexedDB 的工具。
web-db-extension 简介
web-db-extension 是一个基于 IndexedDB 封装的npm包，使用它你可以方便地在浏览器内使用IndexedDB存储数据。它的主要特点有：
- 简单易用，具有良好的API设计
- 支持批量及条件查询
- 支持深度遍历
- 用Promise实现异步操作
web-db-extension 安装
使用 npm 安装 web-db-extension：
npm install web-db-extension --save
web-db-extension 使用
初始化
首先，我们需要在应用中引入 web-db-extension，并初始化一个数据库实例。示例代码如下：
import webDb from 'web-db-extension';
const options = {
dbName: 'demoDB', // 数据库名称
storeName: 'demoStore' // 数据库中创建的对象存储名称
};
const db = webDb(options);添加数据
接下来我们可以将数据存储到数据库中。以下是一个示例，如何向数据库中存储一个 key 为 1，value 为 'John' 的数据。
var data1 = {
id: 1,
name: "John"
};
db.add(data1).then(function(res) {
console.log(res); // 输出 {'success': true}
});查询数据
接下来，让我们来看看如何从数据库中查询数据。以下是一个从数据库中查询 key 为 1 的数据的示例。
db.get(1).then(function(res) {
console.log(res); // 输出一个对象 {id: 1, name: "John"}
});除了 get 方法之外，我们也可以使用搜索方法进行条件查询。以下是一个从数据库中查询所有 name 为 'John' 的数据的示例。
let queryOption = {
name: 'John'
};
db.query(queryOption).then(function(res) {
console.log(res); // 输出 name 为 'John' 的所有数据
});更改数据
在数据库中更改数据也是一个常见的操作。以下是一个示例代码，如何将 key 为 1 的值更新为 'Jack'。
let data2 = {
id: 1,
name: 'Jack'
};
db.update(data2).then(function(res) {
console.log(res); // 输出 {success: true}，表示更新成功
});删除数据
最后一个操作是从数据库中删除数据。以下代码是从数据库中删除 key 为 1 的数据的示例。
db.del(1).then(function(res) {
console.log(res); // 输出 {success: true}，表示删除成功
});总结
本文介绍了 npm 包 web-db-extension 的相关内容，包括它的安装和使用方法。web-db-extension 的使用十分简单，而且具有很强的扩展性和适用性。希望这篇文章对正在学习通过浏览器本地存储数据的前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664b81e8991b448e269b