在构建 PWA（Progressive Web App）应用过程中，IndexedDB 数据库是非常有用的工具。IndexedDB 是一种在客户端存储数据的浏览器 API。它允许开发者在浏览器上保存、查询和更新数据，并提供了一套基于事件的 API。在这篇文章中，我们将深入讨论 PWA 中 IndexedDB 数据库的使用方法，从而使你的 PWA 应用更加强大和有用。
简介
IndexedDB 是一种 NoSQL 数据库，它使用键值对存储数据。此外，IndexedDB 也提供了一些高级功能，例如索引、事务和游标，因此它可以与其他浏览器 API 配合使用，以产生非常有用的实际效果。下面是一些 IndexedDB API 的常用方法：
indexedDB.open(): 打开数据库。database.createObjectStore(): 创建一个存储对象。objectStore.put(): 存储数据。objectStore.get(): 获取数据。objectStore.delete(): 删除数据。
创建 IndexedDB 数据库
在开始使用 IndexedDB 存储数据之前，首先需要创建一个数据库。下面是一个简单的示例：
-- -------------------- ---- ------- --- --- --- ------- - ---------------------------- --- --------------- - --------------- - ----------------------- -- ----------------- - --------------- - -- - --------------- ----------------------- -- ----------------------- - --------------- - --- -- - -------------------- --- ----------- - ---------------------------- - -------- ---- --- ----------------------------------- ----------- - ------- ----- --- --
在这个示例中，我们使用 indexedDB.open() 方法打开一个名为 myDatabase 的数据库。如果数据库已经存在，那么我们将直接获取数据库对象。否则，我们将创建一个新的数据库。
然后，在 request.onupgradeneeded 回调函数中，我们使用 db.createObjectStore() 方法创建一个名为 user 的存储对象，并指定其主键为 id。同时，我们也创建了一个名为 username 的索引，以便在存储和查询数据时使用。
存储数据
一旦数据库被打开并创建了存储对象，我们就可以开始向它存储数据了。下面是一个简单的存储数据的示例：
-- -------------------- ---- ------- --- ----------- - ------------------------ ------------- --- ----------- - -------------------------------- --- ------- - ----------------- --- -- --------- ------ --- --------------- - --------------- - ---------------------- -- ----------------- - --------------- - ---------------------- --
在这个示例中，我们使用 db.transaction() 方法打开一个读写事务，并使用 objectStore.put() 方法向 user 存储对象中存储一个 id 为 1、username 为 john 的数据。如果存储成功，则调用 request.onsuccess() 回调函数。否则，我们将调用 request.onerror() 回调函数。
查询数据
在存储完数据之后，我们可以使用 objectStore.get() 方法查询数据。下面是一个简单的查询数据的示例：
-- -------------------- ---- -------
--- ----------- - ------------------------ ------------
--- ----------- - --------------------------------
--- ------- - -------------------
--------------- - --------------- -
----------------------
--
----------------- - --------------- -
-- ---------------- -
-------------------------------------
- ---- -
---------------------
-
--在这个示例中，我们使用 db.transaction() 方法打开一个只读事务，并使用 objectStore.get() 方法从 user 存储对象中获取 id 为 1 的数据。如果找到了该数据，则调用 request.onsuccess() 回调函数，并输出它的 username。否则，我们将调用 request.onerror() 回调函数。
删除数据
使用 objectStore.delete() 方法可以删除存储对象中的数据。下面是一个简单的示例：
-- -------------------- ---- ------- --- ----------- - ------------------------ ------------- --- ----------- - -------------------------------- --- ------- - ---------------------- --------------- - --------------- - ---------------------- -- ----------------- - --------------- - ---------------------- --
在这个示例中，我们使用 db.transaction() 方法打开一个读写事务，并使用 objectStore.delete() 方法删除 id 为 1 的数据。如果删除成功，则调用 request.onsuccess() 回调函数。否则，我们将调用 request.onerror() 回调函数。
总结
在本文中，我们深入讨论了 PWA 应用中 IndexedDB 数据库的使用方法，并且提供了一些实际的示例代码。使用 IndexedDB，我们可以在客户端存储数据，并且非常方便地进行查询和更新。使用 IndexedDB，我们可以更好地构建具有丰富功能的 PWA 应用。如果你正在构建一个 PWA 应用，那么考虑使用 IndexedDB，它将为你提供非常有用的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a93c648841e989477d690