在 PWA（Progressive Web App）开发中，数据存储和访问是非常重要的一环。本文将详细介绍 PWA 中常用的数据存储和访问技术，包括 IndexedDB、Web Storage 和 Cache API，并提供示例代码和指导意义。
IndexedDB
IndexedDB 是一种在浏览器中存储大量结构化数据的高性能解决方案。它提供了一个异步的 API，可以在浏览器中创建和管理数据库，存储和检索数据。IndexedDB 可以存储任何类型的数据，包括 JavaScript 对象、Blob 和 ArrayBuffer。
创建数据库
使用 IndexedDB 之前，需要先创建一个数据库。可以使用以下代码创建一个名为 "myDatabase" 的数据库：
const request = indexedDB.open("myDatabase", 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
};上述代码会创建一个名为 "myDatabase" 的数据库，并在数据库中创建一个名为 "myObjectStore" 的对象仓库。对象仓库是一个存储对象的容器，类似于关系型数据库中的表。
存储数据
存储数据需要使用事务。以下是一个存储数据的示例：
-- -------------------- ---- -------
----- ------- - ---------------------------- ---
----------------- - --------------- -
----- -- - --------------------
----- ----------- - --------------------------------- -------------
----- ----------- - -----------------------------------------
----- ---- - - --- -- ----- -------- ---- -- --
----- ------- - ----------------------
----------------- - --------------- -
----------------- ------ ---------------
--
--------------- - --------------- -
------------------ ------- -------
--
--上述代码会在 "myObjectStore" 对象仓库中存储一个名为 "Alice" 的对象。存储数据的方式有 add、put 和 delete 等。add 会在对象仓库中添加一条数据，如果主键已存在，则会抛出错误。put 会在对象仓库中存储一条数据，如果主键已存在，则会覆盖原有数据。delete 会在对象仓库中删除一条数据。
检索数据
检索数据也需要使用事务。以下是一个检索数据的示例：
-- -------------------- ---- -------
----- ------- - ---------------------------- ---
----------------- - --------------- -
----- -- - --------------------
----- ----------- - --------------------------------- ------------
----- ----------- - -----------------------------------------
----- ------- - -------------------
----------------- - --------------- -
----- ---- - --------------------
----------------- --------- --------------- ------
--
--------------- - --------------- -
------------------ ---------- -------
--
--上述代码会从 "myObjectStore" 对象仓库中检索 id 为 1 的数据，并将数据打印到控制台上。检索数据的方式有 get、getAll 和 count 等。
指导意义
IndexedDB 是一种强大的数据存储解决方案，可以存储大量结构化数据。在 PWA 开发中，可以使用 IndexedDB 存储离线数据、缓存数据等。但是 IndexedDB 的 API 比较复杂，需要使用事务和回调函数，需要一定的学习和使用成本。
Web Storage
Web Storage 是一种在浏览器中存储少量数据的解决方案。它提供了一个简单的 API，可以在浏览器中存储和检索键值对数据。Web Storage 包括 localStorage 和 sessionStorage 两种类型。
localStorage
localStorage 是一种长期存储数据的解决方案，存储的数据不会过期。以下是一个存储数据的示例：
localStorage.setItem("key", "value");上述代码会在 localStorage 中存储一个名为 "key" 的键值对数据。
sessionStorage
sessionStorage 是一种临时存储数据的解决方案，存储的数据会在会话结束时被清除。以下是一个存储数据的示例：
sessionStorage.setItem("key", "value");上述代码会在 sessionStorage 中存储一个名为 "key" 的键值对数据。
检索数据
检索数据需要使用 getItem 方法。以下是一个检索数据的示例：
const value = localStorage.getItem("key");
console.log("Data retrieved successfully:", value);上述代码会从 localStorage 中检索名为 "key" 的数据，并将数据打印到控制台上。
指导意义
Web Storage 是一种简单的数据存储解决方案，可以存储少量键值对数据。在 PWA 开发中，可以使用 Web Storage 存储用户偏好设置、表单数据等。但是 Web Storage 的存储容量有限，只能存储少量数据。
Cache API
Cache API 是一种在浏览器中缓存数据的解决方案。它提供了一个简单的 API，可以在浏览器中缓存 HTTP 请求和响应数据。Cache API 可以帮助 PWA 应用离线工作，提高应用的性能。
缓存数据
使用 Cache API 缓存数据需要先打开一个缓存，然后使用 add 或 put 方法缓存数据。以下是一个缓存数据的示例：
caches.open("myCache").then(function(cache) {
cache.add("/api/data");
});上述代码会打开一个名为 "myCache" 的缓存，并缓存一个名为 "/api/data" 的 URL。
检索数据
使用 Cache API 检索数据需要使用 match 方法。以下是一个检索数据的示例：
caches.match("/api/data").then(function(response) {
if (response) {
console.log("Data retrieved from cache:", response);
} else {
console.log("Data not found in cache");
}
});上述代码会从缓存中检索名为 "/api/data" 的 URL，并将数据打印到控制台上。
指导意义
Cache API 是一种强大的数据缓存解决方案，可以帮助 PWA 应用离线工作，提高应用的性能。在 PWA 开发中，可以使用 Cache API 缓存静态资源、API 响应数据等。但是 Cache API 只能缓存 HTTP 请求和响应数据，不能存储任意类型的数据。同时，缓存数据需要占用一定的存储空间，需要注意存储容量的限制。
结论
本文介绍了 PWA 开发中常用的数据存储和访问技术，包括 IndexedDB、Web Storage 和 Cache API。这些技术各有优缺点，开发者需要根据实际需求选择合适的技术。同时，开发者需要注意数据存储的容量限制，避免存储过多数据导致应用性能下降。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675e9b9de49b4d071618765e