PWA 使用 IndexedDB 存储数据的方法与技巧
在计算机中，IndexedDB 是一种本地存储的系统，它允许 Web 应用程序在客户端存储结构化数据。PWA (progressive web app) 是当今许多 Web 应用程序采用的一种技术，它可以使 Web 应用程序像本地应用程序一样运行。在 PWA 中，IndexedDB 可以用于永久存储应用程序数据，提供类似于本地应用程序的体验。
IndexedDB 使用键值对存储数据，并允许数据存储在不同的对象存储区中。每个对象存储区包含有一组对象，每个对象有一个唯一的键，可以用于检索该对象。下面是一个简单的 IndexedDB 数据库创建和对象存储区创建的示例：
-- -------------------- ---- ------- ----- ------ - ------------- ----- --------- - -- -- -------- ------ ----- ----- ------- - ---------------------- ----------- --------------- - ------- -- - ------------------- -- ---- ------------ -- ----------------------- - ------- -- - ----- -- - -------------------- -- ----------- ----- ----------- - ------------------------------------- - -------- ---- --- -- ------ ------------------------------- ------- - ------- ----- --- -- ----------------- - ------- -- - ----- -- - -------------------- --------------------- ------ ---------------- -- -- --------- ---- --- ----------- --
上面的代码将创建一个名为 myDatabase 的 IndexedDB 数据库，并在其上创建一个名为 myObjectStore 的对象存储区。myObjectStore 包含一个名为 id 的键和一个名为 name 的索引，可以用于查找包含特定名称的对象。
要将数据添加到 IndexedDB 中，可以使用 add() 方法来添加对象。以下示例演示如何在上面创建的 myObjectStore 中添加数据：
-- -------------------- ---- ------- ----------------- - ------- -- - ----- -- - -------------------- ----- ----------- - --------------------------------- ------------- ----- ----------- - ----------------------------------------- ----- ---- - - --- ---- ----- ----- ---- -- ----- ------- - ---------------------- ----------------- - -- -- ----------------- -------- --------------- - -- -- ------------------- -- --- ------- -
在上面的示例中，我们在 myObjectStore 中添加了一个对象，该对象包含一个名为 id 的键和一个名为 name 的值。
要从 IndexedDB 中检索对象，可以使用 get() 方法。以下示例演示如何从 myObjectStore 中检索具有特定 id 的对象：
-- -------------------- ---- -------
----------------- - ------- -- -
----- -- - --------------------
----- ----------- - --------------------------------- -------------
----- ----------- - -----------------------------------------
----- ------- - ---------------------
----------------- - ------- -- -
----- - ---- - - --------------------
---------------- ------ ---- -- --- --- --- ---- ----------
--
--------------- - -- -- ------------------- -- --- -------
--
在上面的示例中，我们从 myObjectStore 中检索具有 id 123 的对象，并将其名称打印到控制台上。
要更新或删除 IndexedDB 中的数据，可以使用 put() 和 delete() 方法。以下示例演示如何更新先前添加的数据：
-- -------------------- ---- ------- ----------------- - ------- -- - ----- -- - -------------------- ----- ----------- - --------------------------------- ------------- ----- ----------- - ----------------------------------------- ----- ---- - - --- ---- ----- ----- ---- -- ----- ------- - ---------------------- ----------------- - -- -- ----------------- ---------- --------------- - -- -- ------------------- -- ------ ------- -
在上面的示例中，我们使用 put() 方法将先前添加的 John Doe 数据更新为 Jane Doe。
IndexedDB 是一种强大的本地存储系统，可为 PWA 提供可靠的数据存储解决方案。通过在 IndexedDB 中存储数据，您可以轻松地创建强大的离线 Web 应用程序，并使 Web 应用程序对用户更加可用。
总结
本文讲解了 PWA 中使用 IndexedDB 存储数据的方法及技巧。通过示例代码，介绍了如何创建 IndexedDB 数据库，添加、更新、删除数据以及如何从数据库中检索对象。希望这篇文章对您学习 IndexedDB 以及如何在 PWA 中使用它存储数据有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481949e48841e989410e5b6