IndexedDB 是一种浏览器本地存储数据的 API，可以在浏览器上存储结构化的数据，支持离线使用，并且与 PWA（Progressive Web App） 相关。IndexedDB 是 PWA 中的本地缓存解决方案之一，可以在离线状态下使用 PWA 特性，比如应用程序缓存。
PWA 简介
PWA 是一种兼具 Web 应用和原生应用优点的应用程序模型。用户可以从浏览器中访问它，也可以将其添加到主屏幕，实现类似原生应用的交互体验。PWA 可以使用新技术，如离线缓存、推送通知等，提高性能和用户体验。
IndexedDB 简介
IndexedDB API 提供了一种在浏览器内部储存结构化数据的方式。它使用键值对存储数据，一个 key 对应一个 value。它基于 JavaScript 中的异步编程模型，使用 Promise、async/await 等语法解决回调地狱和并发问题。
IndexedDB 使用类似于 SQL 的查询语句 (IndexedDB 用的是 IDBKeyRange 对象)。它支持索引，可以查询和排序储存在其中的
IndexedDB 如何迎合 PWA
在 PWA 中，IndexedDB 可以用来缓存数据、支持离线应用、或在后台执行任务。使用 IndexedDB，可以缓存重要的应用数据，以便在没有网络连接的情况下仍然可用。使用 IndexedDB，可以延迟加载一些不必要的资源，以提升网页性能。PWA 还可以使用 Workbox 这样的库，来管理 IndexedDB 中的缓存数据。
如何使用 IndexedDB
以下是使用 IndexedDB 的一个示例：
-- -------------------- ---- -------
----- ------ - -------------
----- --------- - --
----- --------- - ----------
----- ------- - --------
----- ------ - -- -- -
------ --- ----------------- ------- -- -
----- ------- - ---------------------- -----------
--------------- - --- -- -
---------------- ------ ------------------------
--
----------------- - --- -- -
-------------------------
--
----------------------- - --- -- -
----- -- - ----------------
----- ----------- - ------------------------------- - -------- ------- ---
----- ----- - -------------------------------- -------- - ------- ---- ---
--
---
--
----- ------- - ----- ----- -- -
----- -- - ----- ---------
----- -- - ------------------------- ------------
----- ----- - --------------------------
----- ----- - ---------------------
----- ----- - ---------------
------ --- ----------------- ------- -- -
------------- - --- -- -
---------------- ----- ------ --------------------
--
--------------- - -- -- -
----------------------
--
---
--
----- -------- - ----- ------ -- -
----- -- - ----- ---------
----- -- - ------------------------- -------------
----- ----- - --------------------------
----------------
------ --- ----------------- ------- -- -
---------- - --- -- -
---------------- ----------- ------ --------------------
--
------------- - -- -- -
----------
--
---
--这是一个简单的 IndexedDB 数据存储示例，它有三个函数：openDB、getData 和 saveData。
openDB 函数基本上是建立数据库的方法。dbName、dbVersion 和 storeName 分别指定数据库名称、版本和存储对象名称。 openDB 方法在打开数据库时创建一个名称为 myStore 的存储对象，并创建一个名为 myKey 的键。
getData 函数从存储对象中检索特定的数据，并返回数据查询结果。
saveData 函数将数据保存到存储对象中。
总结
IndexedDB 是一种用于在浏览器内部储存数据的 API，它可以迎合 PWA 的需求，如离线应用、缓存重要数据等。本文介绍了 IndexedDB 的基本概念、 PWA 的应用场景，以及如何使用 IndexedDB 缓存数据。希望这篇文章能给使用 IndexedDB 的前端开发人员带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ba82148841e989486e0ca