1. 什么是 indexedDB
indexedDB 是 web 浏览器提供的一种本地储存数据的 API，它可以在客户端存储大量的结构化数据，同时提供了强大的索引查询能力。它比以前的储存方式（如 cookie）更方便和可靠，也更节省带宽。
2. ztw-indexeddb 简介
ztw-indexeddb 是一个 npm 包，它是基于 indexedDB 的二次封装，提供对 indexedDB 的更友好和易用的接口。
它的使用非常简单，只需要两个步骤：
安装 ztw-indexeddb：
npm install ztw-indexeddb --save在代码中使用 ztw-indexeddb：
import { ZTWIndexedDB } from 'ztw-indexeddb'; const db = new ZTWIndexedDB('myDatabase', 1);这段代码实例化了一个名为
myDatabase的 indexedDB 数据库，版本号为1。
3. API 介绍
ztw-indexeddb 主要提供以下几个 API：
3.1 createObjectStore()
这个 API 用来创建一个新的对象仓库。一个 indexedDB 数据库可以有多个对象仓库，每个对象仓库可以储存一个对象（JSON 对象）数组。
db.createObjectStore('people', { keyPath: 'id' });这段代码创建了一个名为 people 的新对象仓库，并指定了每个对象数组中的元素都有一个 id 字段作为键。
3.2 add()
这个 API 用来往一个对象仓库中添加新的对象。
db.add('people', { id: 1, name: 'Bob' });这段代码往名为 people 的对象仓库中添加了一个新的 JSON 对象 { id: 1, name: 'Bob' }。
3.3 update()
这个 API 用来更新一个对象仓库中已有的对象。
db.update('people', { id: 1, name: 'Alice' });这段代码更新了名为 people 的对象仓库中键为 1 的 JSON 对象的 name 字段的值为 'Alice'。
3.4 delete()
这个 API 用来删除一个对象仓库中指定的对象。
db.delete('people', 1);这段代码删除了名为 people 的对象仓库中键为 1 的 JSON 对象。
3.5 get()
这个 API 用来查询一个对象仓库中指定的对象。
db.get('people', 1).then(person => {
console.log(person.name); // 输出 'Alice'
});这段代码查询了名为 people 的对象仓库中键为 1 的 JSON 对象，并输出它的 name 字段的值 'Alice'。
3.6 getAll()
这个 API 用来查询一个对象仓库中所有的对象。
db.getAll('people').then(people => {
console.log(people); // 输出整个 people 对象数组
});这段代码查询了名为 people 的对象仓库中所有的 JSON 对象，并输出整个 people 数组。
4. 示例代码
下面是一个完整的例子，演示如何使用 ztw-indexeddb 在客户端储存一个名为 people 的 JSON 对象数组：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- -- ---------- ----------------- - - --------- ----- -- - --- -------------------------- --- -- ------ -------- ------------ ---- ------------------------------ - -------- ---- --- -- --- -------- ---------- ---- -- ---------------- - --- -- ----- ----- --- ---------------- - --- -- ----- ------- --- -- ---- -------- -------- - - ---- ---------- ---------------- -------------- -- - ------------------------- -- -- ----- --- -- ---- -------- --------- ---- -------- ------ -- ------------------------------- -- - -------------------- -- -- -- --- -- ----- ----- -- - --- -- ----- ------- -- --- -- ---- -------- -------- - - ---- --- ---- ---- ------------------- - --- -- ----- --------- --- -- -------- -------- -------- - - ---- ---------- ---------------- -------------- -- - ------------------------- -- -- --------- --- -- ---- -------- -------- - - ---- -- ------------------- --- -- -------- -------- --------- ---- -------- ------ -- ------------------------------- -- - -------------------- -- -- -- --- -- ----- --------- -- ---
5. 总结
使用 ztw-indexeddb 可以让开发者更方便地使用 indexedDB API，并简化了一些操作。同时，indexedDB 可以在客户端储存大量的结构化数据，并提供强大的索引查询能力，是一个非常有用的 web API。
希望读者可以通过本文对 indexedDB 有更详细和深入的了解，从而可以更好地应用它在自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626181e8991b448dfa68