前言
随着 PWA 在 Web 应用中的广泛应用，越来越多的 Web 开发者开始了解和学习 IndexedDB，这是一种能够支持大规模存储数据的 Web 存储技术。IndexedDB 是 HTML5 标准中的一个重要组成部分，它能够让你轻松地在客户端存储、检索和修改结构化数据，而无需借助外部数据库例如 MySQL 或 MongoDB。
在本文中，我们将介绍在 PWA 应用中如何使用 IndexedDB 存储数据，同时讲解 IndexedDB 的基础知识和使用方法。
IndexedDB 是什么？
IndexedDB 是一种运行在 Web 浏览器上的本地键值对数据存储系统。相较于 Web Storage 和 Cookie，IndexedDB 具备以下特点：
- 具备异步 API，允许开发者在数据库请求操作完成之后再进行响应操作。
- 支持事务操作，可以避免数据的重复修改或写入。
- 能够存储较大数据量，并支持高级别的数据检索。
IndexedDB 由键值对组成，其中键是一种字符串类型，而值可以是对象、文本、二进制等不限类型的数据，其优点是可以灵活地存储 JavaScript 对象。
IndexedDB 支持存储多个数据库和索引，因此我们可以使用其来实现一种高效的本地数据存储和检索方案，非常适合 PWA 应用。
如何在 PWA 应用中使用 IndexedDB
下面我们将介绍如何在 PWA 应用中使用 IndexedDB。
第一步：打开数据库
进入 PWA 应用后，我们需要首先打开数据库。您可以使用下面的代码来打开一个名为 MyDatabase 的新数据库。
--- ------- - -----------------------------
IndexDB 打开数据库时，返回一个 IDBRequest 对象，其有以下几种状态：
- Pending：表示请求还没有完成
- Success：表示请求成功
- Error：表示请求出错
为了监听打开数据库成功或失败的事件，您需要添加以下两个事件监听器：
--------------- - -------- ------- -
-- ------
--
----------------- - -------- ------- -
-- -------
--第二步：创建对象仓库
接下来，您需要创建一个对象存储仓库以存储您的数据。您可以使用 createObjectStore() 方法，以及设置参数名称和键来创建对象仓库。
--- -- - -------------------- --- ----------- - -------------------------------- --------- -------
上述代码将创建名为 students 的对象仓库，并且 id 字段将被用作主键，它将在之后的记录中用于检索和更新数据。
第三步：添加数据
现在您已经成功创建了存储在 IndexedDB 中的对象仓库，接下来便是将数据添加到仓库中。在此之前，您需要先创建一个事务对象，该对象将用于控制插入的数据。
--- ----------- - ---------------------------- ------------- --- ----------- - ------------------------------------
要添加新的数据，您可以使用 add() 方法。该方法将添加一个新的对象到当前仓库中。
--- ------- - -
--- ------
----- -------
---- ---
------ --------- --------
--
--- ------- - -------------------------第四步：获取数据
现在您已经成功地添加了数据，接下来我们需要从仓库中获取数据。您可以使用 getAll() 或者 get() 方法。
使用 getAll() 方法，将返回所有记录的对象数组：
--- ------- - ---------------------
----------------- - ---------- -
--- -------- - ---------------
-- -- --------- ---- --------
-使用 get() 方法，将返回指定主键值的记录：
--- ------- - -----------------------
----------------- - ---------- -
--- ------- - ---------------
-- -- --------- ---- -------
-第五步：更新数据
当您需要更新已经存在的数据时，可以通过 put() 方法实现：
--- ------- - -----------------------
----------------- - -------- -- -
--- ------- - ---------------
------------- - --------------
--- ------ - -------------------------
--第六步：删除数据
您同样可以删除指定的数据，使用delete() 方法即可：
--- ------- - --------------------------
----------------- - -------- -- -
------------------- ---- --- --- -- ----------
--示例代码
下面是一个简单的示例代码，展示如何在 PWA 应用中使用 IndexedDB 存储和读取数据：
-- -----
--- ------- - -----------------------------
--------------- - -------- -- -
--------------------- ------ -- -------
--
----------------- - -------- -- -
-- -------
--- -- - ---------------
--- ----------- - ---------------------------- -------------
--- ----------- - ------------------------------------
--- ------- - -
--- ------
----- -------
---- ---
------ --------- --------
--
--- --- - -------------------------
------------- - -------- -- -
------------------- --------
--
-- ----
--- ---- - -----------------------
-------------- - -------- -- -
--- ------ - ------------
--------------------
--
--总结
在本文中，我们介绍了 IndexedDB 这种 Web 存储技术以及如何在 PWA 应用中使用这种技术来存储和检索大规模数据。通过 IndexedDB，开发者可以在客户端存储、检索和修改大量结构化数据，而无需借助外部数据库。
高效的本地数据存储和检索方案是 PWA 应用中重要的一环，IndexedDB 是 PWA 应用的首选方案之一。我们建议开发者掌握 IndexedDB，以便在 Web 应用中使用 IndexedDB 实现灵活的本地数据存储方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654c93ed7d4982a6eb609542