前言
在现代 Web 应用中，数据的存储通常要接受多种挑战，例如无网络状态，网络延迟以及数据多次读取成本等等，因此，使用本地存储技术来解决这些问题就成为了一种不可或缺的选择，那么 IndexedDB 就是其中一种。
什么是 IndexedDB
IndexedDB 是一种浏览器内置的 NoSQL 数据库，支持针对存储在它内部的对象存储多属性索引，以便更快地检索数据。与 Web Storage 不同，IndexedDB 具有许多更丰富的数据查询和排序功能，并且可以存储大量的数据。
如何使用 IndexedDB
IndexedDB 接口由许多不同的对象组成，以支持对数据库和它的数据进行 CRUD 操作。它们包括：
- indexedDB - 代表 IndexedDB 数据库。
- IDBFactory - 对 IndexedDB 进行操作，通常通过 window.indexedDB 实例化。
- IDBDatabase - 对象表示 IndexedDB 数据库。它由 IDBFactory 打开并返回。
- IDBObjectStore - 用于存储数据的对象仓库。这些仓库由 IDBDatabase 创建。
- IDBIndex - 对象仓库的属性索引。
- IDBCursor - 对仓库的数据集的迭代器。
接下来，在 PWA 应用中利用 IndexedDB 进行数据存储的核心逻辑应是这样的：
- 打开 IndexedDB 对象仓库。
- 通过 IDBObjectStore 接口获取或创建对象仓库。
- 创建或更新一个对象。
- 从对象仓库中检索值。
- 删除一个对象。
- 通过 IDBIndex 进行查询。
PWA 应用中如何进行 IndexedDB 数据存储
对于 PWA 应用，IndexedDB 的使用基于浏览器能力而来。实现 PWA 应用中的 IndexedDB 基本思路如下：
- 打开数据库
获取执行添加/查询/删除等操作的数据库对象之前，我们需要打开数据库。示例：
--- --------- - ------------------ -- -------- ----------- -
--- ----- - ------------------------------------ -
-------- ----
---
------------------------- ------- -
------- -----
---
---idb是一个需要安装的库，用于 IndexedDB 的异步创建。pwa-db是数据库名称。1是版本号，当版本号变更时，自动触发 upgrade 事件，从而实现数据库结构升级等逻辑。upgradeDb回调函数在数据库打开时将会执行一次，可用于初始化数据库和升级数据库结构。
- 创建对象仓库
在已打开的 IndexedDB 数据库上创建一个新的对象仓库时，首先需要使用 transaction 与数据存续期探测方法进行检查及创建。示例：
---------
------------------ -
--- -- - ----------------------- -------------
--- ----- - ------------------------
-------------- ------ ----- ------ ---- --- ------ ------------------
------ ------------
--
---------------- -
----------------- ---------
--在上面的示例中，我们使用 transaction 方法以 readwrite 权限来打开对象仓库。其中 'store' 是对象仓库的名称。一旦对象仓库已经打开，使用 objectStore 方法获得对该对象仓库的访问权限。然后，使用 put 方法将该 item 添加到对象仓库里，如果提交成功，则会打印 item added!。
- 添加数据
如果要添加新的数据，需要执行 add 方法，如下所示：
--- -- - ----------------------- ------------- --- ----- - ------------------------ -------------- ------ ----- ------- ---- --- ------ --------------------- ------ ------------
除 add 方法外，IndexedDB 还提供了 put 方法，功能与 add 方法相同，但如果存在同名数据，则会更新它。
- 查询数据
要查询存储在对象仓库中的数据，可以使用对象仓库的 API。例如，可以使用 getAll() 方法，如下所示：
---------
------------------ -
--- -- - ------------------------
--- ----- - ------------------------
------ ---------------
--
------------------------ -
------------------- -- ----------
---我们首先打开了 IndexedDB，然后使用 transaction 方法中的 'store' 对象仓库名创建了一个只读事务。该对象仓库的 getAll() 方法将获取所有项目，并将其存储在 allItems 数组中。最后，我们通过打印 allItems 数组来检查是否获取了正确的数据项。
- 更新数据
要从对象仓库中更新数据，可以使用 put 方法。
---------
------------------ -
--- -- - ----------------------- -------------
--- ----- - ------------------------
-------------- ------ ----- ------- ---- --- ------ ---------------------
------ ------------
--
---------------- -
----------------- -----------
---如果对象仓库不存在此项，则在将项添加到对象仓库之前使用 add 函数插入数据。
- 删除数据
你可以使用对象仓库的 delete 方法从对象仓库中删除数据。示例
---------
------------------ -
--- -- - ----------------------- -------------
--- ----- - ------------------------
--------------------
------ ------------
--
---------------- -
----------------- -----------
---- 查询特定项
如果您有一个特定值，您可以使用 get 方法查询该值。示例：
---------
------------------ -
--- -- - ------------------------
--- ----- - ------------------------
------ -----------------
--
-------------------- -
-------------------- -- -----------
---- 带索引的查询
如果需要在大型数据集上执行更复杂的查询，可以使用索引。可以在 IDBObjectStore 上使用 createIndex() 方法创建一个新索引。示例:
--- ----- - ------------------------
--- ----- - --------------------
----------------
-------------------- -
------------------ -- ------
---上述示例使用 store.openCursor() 方法和 'next' 事件执行对象仓库项的迭代。与上面的示例不同，这里使用 store.index('name') 函数创建 name 列索引，并使用 index.get() 函数执行检索项。
总结
此篇文章主要介绍了 PWA 应用中如何利用 IndexedDB 进行数据存储的问题。开发者可以根据实际项目实施情况进行数据存储的添加、查询、更新和删除。同时，在 IndexedDB 和对象仓库的基础概念上建立查询、索引等多种操作带来的优势。
参考文献
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ff09c195b1f8cacddaed1a