随着 PWA 技术的发展，越来越多的 Web 应用开始将自己打造成为 Progressive Web App。而作为一种可以离线缓存 App 的技术，IndexedDB 在 PWA 应用中使用越来越广泛。本文将介绍在 PWA 应用中如何使用 IndexedDB 进行数据存储的实践方法。
简介
IndexedDB 是一种在浏览器中存储结构化数据的 API，它采用了键值对的形式进行数据存储，并允许开发者以异步方式进行读取和写入操作。它的存储方式类似于浏览器的 LocalStorage，但有以下优点：
- 可以存储大量数据，储存容量比 LocalStorage 大得多，可以存储数百兆甚至数GB级别的数据；
- API 支持事务，数据操作更加可靠；
- 支持索引和游标，允许按照不同的键访问数据。
在 PWA 应用中，IndexedDB 可以被用来缓存数据，减少对服务器的访问，提升用户体验。
实践
在这里，我们将介绍在 PWA 应用中如何使用 IndexedDB 进行数据存储。
数据库的创建
在 IndexedDB 中，要使用数据库之前，必须先创建它。以下是创建数据库的方式：
var request = indexedDB.open("database name", version);"database name"：创建的数据库名称；version：数据库的版本号。
该函数返回一个 IDBOpenDBRequest 对象，可通过该对象访问数据库。如果数据库不存在，那么将会自动创建一个新的数据库。
每一个 IndexedDB 的数据库都有一个版本号，当我们需要修改数据时，必须将数据库升级。
request.onupgradeneeded = function(event) {
var db = event.target.result;
// 新创建一个对象存储器
var objectStore = db.createObjectStore("storeName", {keyPath: "id"});
};在 onupgradeneeded 事件中，我们可以创建一个对象存储器。对象存储器是 IndexedDB 中存储数据的基本单位，每个对象存储器都有一个名称和对应的键。
数据的读取和写入
写入数据时，我们需要获得对象存储器，并创建一个事务。下面是一个写入数据的示例代码：
-- -------------------- ---- -------
--- ------- - ------------------------ ------ ---------
--------------- - --------------- -
--------------------- ------ - - ------------------------
--
----------------- - --------------- -
--- -- - --------------------
--- ----------- - ----------------------------- -------------
--- ----------- - -------------------------------------
--- ---- - - --- -- ----- ------ --
--- ------- - ----------------------
----------------- - --------------- -
----------------- --- ----- ----------------
--
--读取数据时，我们也需要获得对象存储器，并创建一个事务。下面是一个读取数据的示例：
-- -------------------- ---- -------
--- ------- - ------------------------ ------ ---------
--------------- - --------------- -
--------------------- ------ - - ------------------------
--
----------------- - --------------- -
--- -- - --------------------
--- ----------- - ----------------------------- ------------
--- ----------- - -------------------------------------
--- ------- - --------------------
----------------- - --------------- -
--------------------------------------
--
--索引和游标
使用 IndexedDB 时，我们还可以通过设置索引和游标来提高数据操作的效率。
索引可以创建在对象存储器中的键上。我们可以通过以下代码来创建索引：
var index = objectStore.createIndex("name", "name", { unique: false });上面的代码将一个名为 name 的非唯一索引创建在 name 键上。
游标允许我们按照键的顺序访问存储在对象存储器中的数据。我们可以通过以下代码来创建游标：
var request = objectStore.openCursor();
request.onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
console.log(cursor.value);
cursor.continue();
}
};上面的代码将打开一个游标，访问对象存储器中的数据，然后对每一个数据调用 console.log(cursor.value)，最后通过 cursor.continue() 继续前进到下一个项，直到游标结束。
结论
通过本文的介绍，我们了解了 IndexedDB 在 PWA 应用中的基本使用方法。它可以用来缓存数据，提高系统的效率，避免多次访问服务器。因此，在未来的 Web 开发中，IndexedDB 一定会成为数据存储和离线 Web 应用的重要技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672483c22e7021665e13cec6