Progressive Web Apps (PWA) 是一种新型的 Web 应用程序，能够带来近乎原生应用程序的体验。PWA 应用可以使用 IndexedDB 存储数据，它是一种常见的客户端数据库，通常用于存储较大数据集。IndexedDB 并不是一个全新的技术，它已经存在了一段时间，但在移动端使用时具有巨大的潜力。本文将重点介绍如何在 PWA 应用中使用 IndexedDB，以便为开发者提供有深度的学习和指导意义。
IndexedDB 简介
IndexedDB 是一个客户端数据库，它可以存储和检索大量结构化数据，并进行高效的跨查询。IndexedDB API 提供了访问数据库的方法，包括打开、关闭、查询、添加、删除和更新数据。与许多其他 Web 数据库不同，IndexedDB 已被标准化并得到了广泛的支持。
IndexedDB 具有以下优点：
- 巨大的存储能力：IndexedDB 数据库可以存储大量的结构化数据，而不会影响 Web 应用程序的性能。
- 高效数据管理：IndexedDB 允许开发人员在客户端直接管理数据，而无需将其存储在服务器上。
- 支持离线访问：IndexedDB 数据库允许开发者使用本地存储数据，使得他们在离线状态下仍然可以访问应用程序。
IndexedDB 基础
IndexedDB 库将数据存储在对象仓库中，每个对象仓库都可以包含一个或多个数据存储对象。以下是 IndexedDB API 的基本内容：
打开和关闭数据库
首先，使用以下代码打开数据库：
-- -------------------- ---- ------- ----- ------- - ------------------------------- --------- ----------------------- - -- -- - -- -------------- ----- -- - --------------- -- -- ------ ----- ----- -- ----------------- - -- -- - -- ---------- ----- -- - --------------- -- --------------- - -- -- - -- ---------- ------------------------ -------- --
在访问数据存储对象之前，需要在成功打开数据库的回调函数中实例化一个事务。事务可用于读取、添加、删除和更新存储在数据存储对象中的数据。
const transaction = db.transaction(['object_store_name'], 'readwrite');
const objectStore = transaction.objectStore('object_store_name');
// 这里可以在 object store 里添加、读取、更新和删除数据最后，以以下方式关闭数据库：
db.close();
添加和获取数据
可以使用以下代码在数据存储对象中添加数据：
const request = objectStore.add(data, key);
request.onsuccess = () => {
console.log('数据添加成功');
};
request.onerror = () => {
console.error('数据添加失败');
};为了从数据存储对象中获取数据，需要在成功打开数据存储对象的回调函数中打开一个事务：
-- -------------------- ---- ------- ----- ----------- - ------------------------------------- ------------- ----- ----------- - --------------------------------------------- ----- ------- - --------------------- ----------------- - -- -- - ----- ------ - --------------- -------------------- -- --------------- - -- -- - ------------------------ --
删除数据
要从数据存储对象中删除数据，可以使用以下代码：
const request = objectStore.delete(key);
request.onsuccess = () => {
console.log('数据删除成功');
};
request.onerror = () => {
console.error('数据删除失败');
};IndexedDB 实现 PWA 应用缓存策略
PWA 应用可以使用 IndexedDB 来实现高效的缓存策略。IndexedDB 还可以结合 Service Worker 来实现更强大的功能，例如：
- 引入以下代码以在 Service Worker 中使用 IndexedDB API：
importScripts('indexeddb.js');- 在 Service Worker 中缓存资源：
-- -------------------- ---- -------
------------------------------ ----- -- -
----------------------- -------- -- -
----- -------------- - ----- ----------------------------
-- ---------------- -
------ ---------------
-
----- --------------- - ----- ---------------------
----- ----- - ----- ------------------------
------------------------ -------------------------
------ ----------------
-----
---示例代码
以下是一个简单的 IndexedDB 实现示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
---------------- ---------------
-------
------
------------- ------------
--------- ---------- -------- ---------------------
------- -------------------------
------- -------------------------
------- ----------------------------
--------
-- -----
----- ------- - ------------------------- ---
--------------- - ----- -- -
------------------- -- ---- -----------
--
----------------------- - ----- -- -
----- -- - --------------------
----- ----------- - ---------------------------------
------------------------ --- ---
------------------------ --- ---
------------------------ --- ---
--------------------- ----------- --- ---------
--
----------------- - ----- -- -
--------------------- ------ ---------------
----- -- - --------------------
----- ----------- - ---------------------------- -------------------------------------
-- ----
----------------------------------------------------------- -- -- -
----- ----- - ---------------------------------
----- ---- - ----------- -- ---- ---------
----- --- - -----------
----- ------- - --------------------- -----
----------------- - -- -- -
----------------- ------ ----------- ----------------
----------- - ---
--
--------------- - -- -- -
--------------------- -- --- -------
--
---
-- ----
----------------------------------------------------------- -- -- -
----- ----- - ---------------------------------
----- --- - ------------
----- ------- - ---------------------
----------------- - -- -- -
----- ---- - ---------------
----------------- ---------- ----------- ----------------
--
--------------- - -- -- -
--------------------- -- -------- -------
--
---
-- ----
-------------------------------------------------------------- -- -- -
----- ----- - ---------------------------------
----- --- - ------------
----- ------- - ------------------------
----------------- - -- -- -
----------------- -------- -------------
----------- - ---
--
--------------- - -- -- -
--------------------- -- ------ -------
--
---
--
---------
-------
-------结论
本文介绍了在 PWA 应用中使用 IndexedDB 存储数据的方法，包括打开和关闭数据库、添加、获取和删除数据。我们还展示了如何使用 IndexedDB 和 Service Worker 来实现更快的缓存策略。实践表明 IndexedDB 对于大量的结构化数据存储非常有效，并且适用于 Web 应用程序的客户端存储需求。如果开发者采用 IndexedDB 存储技术，就可以获得更快的 Web 应用程序体验和高效的缓存策略。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b1c95d91dce0dc8877c52