大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

1.什么是 IndexedDB

IndexedDB 是一个大型 NoSQL 存储系统，允许存储用户浏览器中的几乎所有内容。 除了常见的搜 search、get、put 操作之外，IndexedDB 还支持事务。

以下是 MDN 上 IndexedDB 和 NoSQL 的定义：

• IndexedDB 是一个底层 API，用于客户端存储大量结构化数据（包括文件 / blob）， 此 API 使用索引来实现对此数据的高性能搜索。 虽然 DOM 存储对于存储少量数据很有用，但对于存储大量结构化数据则不太有用，而 IndexedDB 提供了一个解决方案。
• NoSQL 数据库，又名 “not only SQL”，是非表格数据库，其数据存储方式与关系表不同。 根据数据模型，NoSQL 数据库有多种类型， 主要类型有：文档、键值、宽列和图表，其提供灵活的模式，并可以轻松扩展大量数据和高用户负载。

每个 IndexedDB 数据库对于某个源（通常是站点域或子域）来说都是唯一的，这意味着其无法访问或被任何其他源访问。 数据存储限制通常相当大（如果存在的话），但不同的浏览器以不同的方式处理限制和数据清理。

可以通过下面方式判断浏览器是否支持 IndexedDB：

function indexedDBStuff () {
  // Check for IndexedDB support:
  if (!('indexedDB' in window)) {
    // Can't use IndexedDB
    console.log("This browser doesn't support IndexedDB");
    return;
  } else {
    // Do IndexedDB stuff here:
    // ...
  }
}
// Run IndexedDB code:
indexedDBStuff();

2.什么是 idb

idb 是一个很小的（~1.19kB）JavaScript 库，主要包括 IndexedDB API，但有一些小的改进，比如：可用性。idb 面向现代主流浏览器，包括： Chrome、Firefox、Safari 以及使用这些引擎的其他浏览器（例如 Edge），但是不包括 IE。

目前 idb 在 Github 通过 MIT 协议开源，有超过 5.8k 的 star、5970k 的项目使用量，NPM 周平均下载了 5,315k，是一个值得关注的前端优质开源项目。

如何使用 idb

安装 idb

首先需要通过 npm 安装：

npm install idb

然后使用模块兼容的系统，如： webpack、Rollup 等：

import {openDB, deleteDB, wrap, unwrap} from 'idb';

async function doDatabaseStuff() {
  const db = await openDB(…);
}

当然，也可以通过 CDN 引用相关 UMD 依赖直接在浏览器 HTML 中使用：

<script src="https://cdn.jsdelivr.net/npm/idb@8/build/umd.js"></script>
<script>
  async function doDatabaseStuff() {
    const db = await idb.openDB(…);
  }
</script>

此时将创建一个全局 idb 对象，其中包含模块版本的所有导出。

idb 常见方法

openDB

此方法打开一个数据库，并返回一个增强的 IDBDatabase 的 Promise。

const db = await openDB(name, version, {
  upgrade(db, oldVersion, newVersion, transaction, event) {
    // …
  },
  blocked(currentVersion, blockedVersion, event) {
    // …
  },
  blocking(currentVersion, blockedVersion, event) {
    // …
  },
  terminated() {
    // …
  },
});

deleteDB

删除数据库:

await deleteDB(name, {
  blocked() {
    // …
  },
});

• name：数据库的名称。
• blocked（可选）：如果数据库已存在并且存在未响应版本更改事件而关闭的打开连接，则调用该请求，直到它们全部关闭为止。

unwrap

获取增强的 IndexedDB 对象并返回未修改的普通对象。

const unwrapped = unwrap(wrapped);

如果出于某种原因，开发者想返回到普通 IndexedDB 可以使用该方法。，Promise 也将被转换回 IDBRequest 对象。

wrap

获取 IDB 对象并返回由此库增强的版本。

const wrapped = wrap(unwrapped);

如果某些第三方代码为开发者提供了 IDBDatabase 对象并且希望它具有该库的功能，则这非常有用。

普通增强

打开数据库后，API 与 IndexedDB 相同，只是做了一些使事情变得更容易的更改。 首先，任何通常返回 IDBRequest 对象的方法现在都将返回结果的 Promise。

const store = db.transaction(storeName).objectStore(storeName);
const value = await store.get(key);

该库将所有 IDBRequest 对象转换为 Promise，但它事先并不知道哪些方法可能返回 Promise。因此，诸如 store.put 之类的方法可能会抛出异常而不是返回 Promise。而如果开发者使用异步函数，则没有明显的差异。

Transaction lifetime

在 Transaction 开始和结束之间不要 await 其他事情，否则 Transaction 将在完成之前关闭。

如果处理完微任务后没有任何剩余操作，IDB 事务会自动关闭。因此，下面代码能正常工作：

const tx = db.transaction('keyval', 'readwrite');
const store = tx.objectStore('keyval');
const val = (await store.get('counter')) || 0;
await store.put(val + 1, 'counter');
await tx.done;

但是下面代码却不能：

const tx = db.transaction('keyval', 'readwrite');
const store = tx.objectStore('keyval');
const val = (await store.get('counter')) || 0;
// This is where things go wrong:
const newVal = await fetch('/increment?val=' + val);
// 这里抛出错误
await store.put(newVal, 'counter');
await tx.done;

idb 的更多方法和使用示例可以参考文末资料，这里不再过多展开。

3.本文总结

本文主要和大家介绍 idb ，其是一个很小的（~1.19kB）JavaScript 库，主要包括 IndexedDB API，但有一些小的改进，比如：可用性。因为篇幅问题，关于 idb 主题只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/jakearchibald/idb

https://www.npmjs.com/package/idb

https://web.dev/articles/indexeddb

https://www.mongodb.com/nosql-explained

https://hackernoon.com/use-indexeddb-with-idb-a-1kb-library-that-makes-it-easy-8p1f3yqq

https://blog.openreplay.com/getting-started-with-indexeddb-for-big-data-storage/

https://filipvitas.medium.com/indexeddb-with-promises-and-async-await-3d047dddd313