PWA（Progressive Web Apps）是一种新兴的 Web 应用技术，它可以让 Web 应用在用户体验以及功能上更接近原生应用。IndexedDB 是 PWA 实现离线存储和服务端数据同步的重要一环。本文将带你深入了解 IndexedDB 的使用方法和实际应用。
什么是 IndexedDB？
IndexedDB 是 HTML5 中的一个新 API，是一种客户端存储形式，可以用来在浏览器中存储和获取较大数量的结构化数据，例如对象和数组。它不是关系型数据库，而是 NoSQL 的理念，将值存储在键值对（key-value pair）中。其特点包括：
- 可以用来离线存储大量数据；
- 可以模拟服务端数据库的查询，并且可以通过 index 针对键名或键值进行查询。
IndexedDB 的使用
IndexedDB 的 API 更为底层，使用 IndexedDB 需要较多的代码，但相应地，能够获得更高的自定义性和效率。以下是使用 IndexedDB 存储数据的基本步骤：
1. 打开数据库
在打开数据库时，需要指定一些参数和回调函数。
-- -------------------- ---- ------- ----- ------ - ------- ----- --------- - -- ----- ------- - ---------------------- ----------- ----------------------- - ------- -- - ----- -- - -------------------- -- -- ------ ----- ----- ----------- - ----------------------------- - -------- ---- --- -- -- ------------- -------------------------------- -------- - ------- ----- --- -- ----------------- - ------- -- - ----- -- - -------------------- -- ----- ---- -- --------------- - ------- -- - ------------------------ ------------------------ --
2. 存储数据
-- -------------------- ---- ------- ----- -- - ----------------------- ------------- ----- ----- - ------------------------ ----- ------- - -------------- -- ------ ----------- ------------- ------- --------- --------- --------------- - ------- -- - ----------------------- ------------------------ -- ------------- - ------- -- - ---------------------- --
3. 查询数据
按主键查询
const tx = db.transaction('books', 'readonly');
const books = tx.objectStore('books');
const request = books.get(1);
request.onsuccess = (event) => {
const book = event.target.result;
console.log(book);
};按索引查询
const tx = db.transaction('books', 'readonly');
const books = tx.objectStore('books');
const titleIndex = books.index('title');
const request = titleIndex.getAll('Javascript 高级程序设计（第3版）');
request.onsuccess = (event) => {
const books = event.target.result;
console.log(books);
};4. 删除数据
-- -------------------- ---- ------- ----- -- - ----------------------- ------------- ----- ----- - ------------------------ ----- ------- - ---------------- --------------- - ------- -- - ----------------------- ------------------------ -- ------------- - ------- -- - ---------------------- --
5. 关闭数据库
IndexedDB 操作完毕后，必须要关闭数据库连接。
db.close();
实际应用
IndexedDB 的使用场景包括缓存数据、离线存储数据和保存用户数据等。下面我们以缓存数据为例，演示如何使用 IndexedDB 缓存 API 响应结果。
-- -------------------- ---- -------
----- --------- - ------------
----- --- - ---------------------------------------------
------------------------------ ------- -- -
----- ------- - --------------
-- ------------ --- ---- -
------------------
------------------------------------------ -- -
-- --------------- -
-------------------- -------------
------ --------------
-
------ ----------------------------------- -- -
-------------------------- -------------
----------------------------------- -- ------------------ ------------------------
------ --------------
---
--
--
-
---在这个例子中，我们监听 fetch 事件，当请求的是指定的 URL 至时，先从缓存中查找对应的请求，如果找到直接返回对应的缓存，否则再发送新的请求，并将请求结果写入 IndexedDB 缓存。存在一些较为繁琐的处理方式，如缓存更新、缓存清理等，这里不再赘述。
总结
IndexedDB 是一种新型 NoSQL 数据库，可以用来存储和获取结构化的客户端数据，是 PWA 实现离线功能和服务端数据同步的重要一环。在使用 IndexedDB 时，需要经历打开数据库、存储数据、查询数据、删除数据和关闭数据库等一系列步骤。同时 IndexedDB 可以提供丰富的特性，例如可以离线访问缓存的数据以及根据 index 针对键和键值查询数据，非常适合 PWA 开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66554573d3423812e49cb7e3