随着 Web 技术的发展，越来越多的 Web 应用程序都开始采用类似本地应用程序的功能，这就是 PWA（Progressive Web App）。
在 PWA 中，我们需要使用一些技术来缓存和存储数据，其中 IndexedDB 是一种非常方便的方法。
什么是 IndexedDB
IndexedDB 是 Web API 的一部分，允许你在浏览器中存储和检索结构化数据。
在 IndexedDB 中，你可以存储一个对象实例，通过关键字来引用它。要查询存储在 IndexedDB 中的对象实例，你需要编写一个 JavaScript 函数。
IndexedDB 是一个通过异步 API 工作的非关系型数据库。与关系数据库不同，IndexedDB 不使用表存储数据，而是使用对象存储数据。
为什么要使用 IndexedDB
IndexedDB 与其他存储数据的方法相比有很多优点。其中最值得一提的是：
- 跨浏览器和跨平台：IndexedDB 是 Web API 的一部分，因此可以在各种浏览器和操作系统上使用。
- 数据存储容量：IndexedDB 可以存储大量的数据，因此非常适合需要存储复杂数据结构的应用程序。
- 动态存储：IndexedDB 可以在运行时动态创建和更改数据库结构。
IndexedDB 的最佳实践
在 PWA 中，IndexedDB 是一种非常方便的方法来存储数据。以下是一些最佳实践供参考：
1. 初始化数据库
在使用 IndexedDB 存储数据之前，你需要初始化你的数据库。下面是一个初始化 IndexedDB 数据库的示例代码：
----- --- - -----------------
----- ------------ - -- -- -
------ --- ----------------- ------- -- -
----- ------- - ---------------------- ---
--------------- - ------- -- ---------------------------
----------------------- - ------- -- -
----- -- - --------------------
----- ----- - ------------------------------------- - -------- ---- ---
------------------------- ------- - ------- ----- ---
-------------------------- -------- - ------- ----- ---
--
----------------- - ------- -- -----------------------------
---
--
------ ------- -------------在上面的代码中，我们使用 window.indexedDB 来访问 IndexedDB 的 API，然后创建一个名为 MyDatabase 的数据库。
然后，我们在 onupgradeneeded 事件中创建一个名为 MyObjectStore 的对象存储，用 id 作为键路径。然后我们创建了两个索引，一个名为 name，另一个名为 email。
2. 添加数据
添加数据到 IndexedDB 中非常简单。下面是一个将对象添加到 IndexedDB 中的代码示例：
----- ------------- - ----- ------ -- -
--- -
----- -------- - ----- ---------------
----- ----------- - --------------------------------------- -------------
----- ----------- - -----------------------------------------
----------------------
- ----- ------- -
---------------------
-
--
------ ------- --------------在上面的代码中，我们首先打开了数据库，然后创建一个名为 readwrite 的读写事务，并通过 objectStore.add 方法将数据添加到名为 MyObjectStore 的对象存储中。
3. 检索数据
检索数据与添加数据类似。下面是一个检索 IndexedDB 数据库中对象的代码示例：
----- ------------------- - ----- -- -- -
--- -
----- -------- - ----- ---------------
----- ----------- - ----------------------------------------
----- ----------- - -----------------------------------------
----- ------- - ---------------------
----------------- - --------------- -
---------------------------------
--
- ----- ------- -
---------------------
-
--
------ ------- --------------------在上面的代码中，我们打开了数据库，然后创建了一个只读事务，并使用 objectStore.getAll 方法检索 MyObjectStore 存储的所有对象。
4. 更新数据
如果你需要更新 IndexedDB 中的对象实例，你可以使用以下代码示例：
----- ------------------ - ----- ------ -- -
--- -
----- -------- - ----- ---------------
----- ----------- - --------------------------------------- -------------
----- ----------- - -----------------------------------------
----- ------- - ----------------------
----------------- - --------------- -
------------------
--
- ----- ------- -
---------------------
-
--
------ ------- -------------------在上面的代码中，我们将打开一个名为 MyObjectStore 的数据库对象，并通过 put 方法来更新数据库中存储的 data 对象实例。
5. 删除数据
从 IndexedDB 中删除对象实例非常简单。下面是一个删除对象实例的代码示例：
----- ------------------ - ----- ---- -- -
--- -
----- -------- - ----- ---------------
----- ----------- - --------------------------------------- -------------
----- ----------- - -----------------------------------------
-----------------------
- ----- ------- -
---------------------
-
--
------ ------- -------------------在上面的代码中，我们打开了一个名为 MyObjectStore 的数据库对象，然后通过 delete 方法来删除一个特定的对象实例。
总结
IndexedDB 是一种非常方便的方法，可用于在 PWA 中存储和检索大量复杂数据。在本文中，我们介绍了 IndexedDB 的最佳实践，以便你可以更轻松地使用它。
无论你是为你的 PWA 应用程序缓存数据，还是存储额外的用户数据，IndexedDB 都是一种非常好的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648c2a8648841e9894a7b877