在 PWA 中，数据缓存是一个非常重要的问题。对于一些离线应用场景，离线数据缓存可以保证应用的正常运行。而 IndexedDB 是一种浏览器自带的数据库，可以在客户端存储大量数据，是实现 PWA 离线数据缓存的好选择。
IndexedDB 简介
IndexedDB 是浏览器自带的数据库，可以在客户端存储大量数据。IndexedDB 使用对象存储来存储数据，每个存储对象都有一个键值。IndexedDB 是异步的，使用回调函数来处理操作结果。
IndexedDB 的主要对象有：
- indexedDB：IndexedDB 的全局对象。
- IDBDatabase：IndexedDB 数据库对象。
- IDBObjectStore：存储对象的对象。
- IDBTransaction：事务对象，用于控制数据库的读写操作。
使用 IndexedDB 实现离线数据缓存
IndexedDB 可以用于实现离线数据缓存。在 PWA 中，我们可以在 service worker 中使用 IndexedDB 存储数据。
创建数据库
首先，我们需要创建一个 IndexedDB 数据库。可以使用以下代码：
-- -------------------- ---- ------- ----- ------ - -------- ----- --------- - -- ----- ------- - ---------------------- ----------- --------------- - ------- -- - --------------------- -- ---- ----------- -------------------- -- ----------------- - ------- -- - ----- -- - -------------------- --------------------- ------ --------------- ---- --
以上代码创建了一个名为 my-db 的数据库，并打开了该数据库。如果数据库已经存在，则直接打开该数据库。否则，会创建一个新的数据库。
创建对象存储
在 IndexedDB 中，我们需要创建一个对象存储来存储数据。可以使用以下代码：
-- -------------------- ---- ------- ----- ------ - -------- ----- --------- - -- ----- ------- - ---------------------- ----------- --------------- - ------- -- - --------------------- -- ---- ----------- -------------------- -- ----------------------- - ------- -- - ----- -- - -------------------- ----- ----------- - --------------------------------------- - -------- ---- --- ------------------- ----- ------- --------------- ------------- -- ----------------- - ------- -- - ----- -- - -------------------- --------------------- ------ --------------- ---- --
以上代码创建了一个名为 my-object-store 的对象存储，并指定了 id 为主键。如果该对象存储已经存在，则直接打开该对象存储。否则，会创建一个新的对象存储。
存储数据
在 IndexedDB 中，可以使用以下代码存储数据：
-- -------------------- ---- -------
----- ------ - --------
----- --------- - --
----- ------- - ---------------------- -----------
--------------- - ------- -- -
--------------------- -- ---- ----------- --------------------
--
----------------------- - ------- -- -
----- -- - --------------------
----- ----------- - --------------------------------------- - -------- ---- ---
------------------- ----- ------- --------------- -------------
--
----------------- - ------- -- -
----- -- - --------------------
----- ----------- - ----------------------------------- -------------
----- ----------- - -------------------------------------------
----- ---- - - --- -- ----- ----- ---- --
----- ------- - ----------------------
--------------- - ------- -- -
--------------------- -- ----- ------- --------------------
--
----------------- - ------- -- -
----------------- ------ --------------- ------
--
--以上代码使用了事务来存储数据。首先，我们需要使用 db.transaction 方法创建一个事务。然后，使用 transaction.objectStore 方法获取对象存储。最后，使用 objectStore.put 方法存储数据。
获取数据
在 IndexedDB 中，可以使用以下代码获取数据：
-- -------------------- ---- -------
----- ------ - --------
----- --------- - --
----- ------- - ---------------------- -----------
--------------- - ------- -- -
--------------------- -- ---- ----------- --------------------
--
----------------------- - ------- -- -
----- -- - --------------------
----- ----------- - --------------------------------------- - -------- ---- ---
------------------- ----- ------- --------------- -------------
--
----------------- - ------- -- -
----- -- - --------------------
----- ----------- - ----------------------------------- ------------
----- ----------- - -------------------------------------------
----- ------- - -------------------
--------------- - ------- -- -
--------------------- -- --- ------- --------------------
--
----------------- - ------- -- -
----- ---- - --------------------
----------------- --------- --------------- ------
--
--以上代码使用了事务来获取数据。首先，我们需要使用 db.transaction 方法创建一个事务。然后，使用 transaction.objectStore 方法获取对象存储。最后，使用 objectStore.get 方法获取数据。
删除数据
在 IndexedDB 中，可以使用以下代码删除数据：
-- -------------------- ---- -------
----- ------ - --------
----- --------- - --
----- ------- - ---------------------- -----------
--------------- - ------- -- -
--------------------- -- ---- ----------- --------------------
--
----------------------- - ------- -- -
----- -- - --------------------
----- ----------- - --------------------------------------- - -------- ---- ---
------------------- ----- ------- --------------- -------------
--
----------------- - ------- -- -
----- -- - --------------------
----- ----------- - ----------------------------------- -------------
----- ----------- - -------------------------------------------
----- ------- - ----------------------
--------------- - ------- -- -
--------------------- -- ------ ------- --------------------
--
----------------- - ------- -- -
----------------- ------- --------------- ---------------------
--
--以上代码使用了事务来删除数据。首先，我们需要使用 db.transaction 方法创建一个事务。然后，使用 transaction.objectStore 方法获取对象存储。最后，使用 objectStore.delete 方法删除数据。
示例代码
以下是一个完整的示例代码，可以在 service worker 中使用 IndexedDB 存储数据：
-- -------------------- ---- -------
----- ------ - --------
----- --------- - --
----- ------------ - -- -- -
------ --- ----------------- ------- -- -
----- ------- - ---------------------- -----------
--------------- - ------- -- -
--------------------- -- ---- ----------- --------------------
---------------------------
--
----------------------- - ------- -- -
----- -- - --------------------
----- ----------- - --------------------------------------- - -------- ---- ---
------------------- ----- ------- --------------- -------------
--
----------------- - ------- -- -
----- -- - --------------------
--------------------- ------ --------------- ----
------------
--
---
--
----- --------- - ---- ----- -- -
------ --- ----------------- ------- -- -
----- ----------- - ----------------------------------- -------------
----- ----------- - -------------------------------------------
----- ------- - ----------------------
--------------- - ------- -- -
--------------------- -- ----- ------- --------------------
---------------------------
--
----------------- - ------- -- -
----------------- ------ --------------- ------
----------
--
---
--
----- ------- - ---- --- -- -
------ --- ----------------- ------- -- -
----- ----------- - ----------------------------------- ------------
----- ----------- - -------------------------------------------
----- ------- - --------------------
--------------- - ------- -- -
--------------------- -- --- ------- --------------------
---------------------------
--
----------------- - ------- -- -
----- ---- - --------------------
----------------- --------- --------------- ------
--------------
--
---
--
----- ---------- - ---- --- -- -
------ --- ----------------- ------- -- -
----- ----------- - ----------------------------------- -------------
----- ----------- - -------------------------------------------
----- ------- - -----------------------
--------------- - ------- -- -
--------------------- -- ------ ------- --------------------
---------------------------
--
----------------- - ------- -- -
----------------- ------- --------------- ---------------------
----------
--
---
--
------------------------------ ------- -- -
----- --- - --- -----------------------
-- ----------- --- ---------------- -
-------
-
-- --------------------- --- ------ -
-------
-
------------------
---------------------------
---------------------- -- -
-- ---------------- -
------ ---------------
-
------ --------------
---------- -- -
------ ----------- --------------
--
------------ -- -
----- -------- - --- ------------------------------ -
-------- - --------------- ------------------ --
---
-----------------------
------------- -- -
------------------------ ----------
---
------ ---------
--
--------- -- -
------ ---------------------
---
--
--
---
----------------------------- ------- -- -
-- ---------- --- ------------ -
----------------
--------------
---------- -- -
------ ----------- ---
--
------------ -- -
------ ------------------ -
------- -------
----- ---------------------
---
--
-------- -- -
------ --------------
---------- -- -
------ -------------- ---
---
--
--
-
---
-------------------------------- ------- -- -
----------------
-----------------------
------------- -- -
------ ---------------------------- ------------
--
--
---以上代码实现了一个简单的离线数据缓存解决方案。在 fetch 事件中，先判断缓存中是否有数据，如果有则返回缓存中的数据，否则从 IndexedDB 中获取数据，并将数据存储到缓存中。在 sync 事件中，将数据同步到后端。在 install 事件中，将应用的静态资源缓存到浏览器中。
总结
使用 IndexedDB 实现 PWA 离线数据缓存解决方案，可以保证应用在离线状态下的正常运行。IndexedDB 是一种浏览器自带的数据库，可以在客户端存储大量数据。在 PWA 中，我们可以在 service worker 中使用 IndexedDB 存储数据，并通过缓存机制实现离线数据缓存。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655d6698d2f5e1655d7a921e