当我们开发Web应用时，经常会遇到需要在客户端存储和操作数据的场景。而IndexedDB作为HTML5规范中的一部分，提供了一种在浏览器中存储和检索大量数据的方式。在本文中，我们将介绍如何使用IndexedDB构建一个渐进式Web应用。
什么是渐进式Web应用？
渐进式Web应用（Progressive Web App）是一种可以像原生应用一样运行在移动设备上的Web应用。它们可以离线访问、响应快速、具有本地安装应用程序的体验感并且可以被添加到主屏幕上。这些特点都是通过使用现代Web技术来实现的，其中包括IndexedDB。
IndexedDB 简介
IndexedDB 是用于在客户端存储结构化数据的低级API。它允许您存储对象和文件，并提供对数据的高效检索和查询功能。通过使用IndexedDB，您可以在客户端创建具有复杂数据模型的Web应用程序。
IndexedDB API基于异步I/O，因此所有繁重的操作都是在后台处理的。这意味着JavaScript线程不会阻塞，从而提高了性能和响应速度。
开始构建IndexedDB应用
要使用IndexedDB，我们需要执行以下步骤：
1. 打开数据库
在打开IndexedDB之前，我们需要先定义数据库的架构，包括数据库名称、版本以及存储对象的名称和键。然后，我们可以使用indexedDB.open()方法来打开数据库，如下所示：
-- -------------------- ---- ------- ----- ------- - ------------- ----- ---------- - -- ----- ---------- - ---------------- --- --- ----- ------- - ----------------------- ------------ --------------- - --------------- - --------------------- ------ - - ------------------------ -- ----------------- - --------------- - -- - -------------------- --------------------- ------ --------------- --
这里，我们定义了一个名为myDatabase的数据库，并将其版本设置为1。然后，我们打开数据库并将其结果存储在全局变量db中。
2. 创建对象存储区
一旦数据库打开，我们就可以创建一个称为“对象存储区”（Object Store）的数据存储区域。这个存储区域会包含我们要存储的数据对象以及用于检索和查询数据的关键字。创建存储区的代码如下所示：
const objectStore = db.createObjectStore(STORE_NAME, { keyPath: "id" });
objectStore.createIndex("name", "name", { unique: false });在这个例子中，我们使用createObjectStore()方法来创建一个名为myObjectStore的对象存储区域，并指定了一个名为id的键值作为对象存储区的主键。接下来，我们创建了一个名为“name”的索引，用于查找名字属性。
3. 添加数据
一旦对象存储区被创建，我们可以向其中添加数据。下面的代码演示了如何将一个对象添加到对象存储区中：
-- -------------------- ---- ------- ----- ----------- - ---------------------------- ------------- ----- ----------- - ------------------------------------ ----- ---- - - --- -- ----- ----- ----- ---- -- -- ----- ------- - ---------------------- ----------------- - --------------- - ----------------- ----- --------------- -- ---------------------- - --------------- - ------------------------ --------- --------------- --
这里，我们首先开始一个读写事务（readwrite transaction）并获取指定名称的对象存储区。然后，我们定义要添加到存储区中的数据，并使用
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31311