前言
随着 PWA 在 Web 应用中的广泛应用，越来越多的 Web 开发者开始了解和学习 IndexedDB，这是一种能够支持大规模存储数据的 Web 存储技术。IndexedDB 是 HTML5 标准中的一个重要组成部分，它能够让你轻松地在客户端存储、检索和修改结构化数据，而无需借助外部数据库例如 MySQL 或 MongoDB。
在本文中，我们将介绍在 PWA 应用中如何使用 IndexedDB 存储数据，同时讲解 IndexedDB 的基础知识和使用方法。
IndexedDB 是什么？
IndexedDB 是一种运行在 Web 浏览器上的本地键值对数据存储系统。相较于 Web Storage 和 Cookie，IndexedDB 具备以下特点：
- 具备异步 API，允许开发者在数据库请求操作完成之后再进行响应操作。
- 支持事务操作，可以避免数据的重复修改或写入。
- 能够存储较大数据量，并支持高级别的数据检索。
IndexedDB 由键值对组成，其中键是一种字符串类型，而值可以是对象、文本、二进制等不限类型的数据，其优点是可以灵活地存储 JavaScript 对象。
IndexedDB 支持存储多个数据库和索引，因此我们可以使用其来实现一种高效的本地数据存储和检索方案，非常适合 PWA 应用。
如何在 PWA 应用中使用 IndexedDB
下面我们将介绍如何在 PWA 应用中使用 IndexedDB。
第一步：打开数据库
进入 PWA 应用后，我们需要首先打开数据库。您可以使用下面的代码来打开一个名为 MyDatabase 的新数据库。
let request = indexedDB.open('MyDatabase');IndexDB 打开数据库时，返回一个 IDBRequest 对象，其有以下几种状态：
- Pending：表示请求还没有完成
- Success：表示请求成功
- Error：表示请求出错
为了监听打开数据库成功或失败的事件，您需要添加以下两个事件监听器：
request.onerror = function (event) {
// 进行错误处理
};
request.onsuccess = function (event) {
// 进行数据库操作
};第二步：创建对象仓库
接下来，您需要创建一个对象存储仓库以存储您的数据。您可以使用 createObjectStore() 方法，以及设置参数名称和键来创建对象仓库。
let db = event.target.result;
let objectStore = db.createObjectStore('students', {keyPath: 'id'});上述代码将创建名为 students 的对象仓库，并且 id 字段将被用作主键，它将在之后的记录中用于检索和更新数据。
第三步：添加数据
现在您已经成功创建了存储在 IndexedDB 中的对象仓库，接下来便是将数据添加到仓库中。在此之前，您需要先创建一个事务对象，该对象将用于控制插入的数据。
let transaction = db.transaction(['students'], 'readwrite');
let objectStore = transaction.objectStore('students');要添加新的数据，您可以使用 add() 方法。该方法将添加一个新的对象到当前仓库中。
let student = {
id: '001',
name: 'John',
age: 20,
major: 'Computer Science'
};
let request = objectStore.add(student);第四步：获取数据
现在您已经成功地添加了数据，接下来我们需要从仓库中获取数据。您可以使用 getAll() 或者 get() 方法。
使用 getAll() 方法，将返回所有记录的对象数组：
let request = objectStore.getAll();
request.onsuccess = function() {
let students = request.result;
// do something with students
}使用 get() 方法，将返回指定主键值的记录：
let request = objectStore.get('001');
request.onsuccess = function() {
let student = request.result;
// do something with student
}第五步：更新数据
当您需要更新已经存在的数据时，可以通过 put() 方法实现：
let request = objectStore.get('001');
request.onsuccess = function () {
let student = request.result;
student.major = 'Mathematics';
let update = objectStore.put(student);
};第六步：删除数据
您同样可以删除指定的数据，使用delete() 方法即可：
let request = objectStore.delete('001');
request.onsuccess = function () {
console.log('Record with key 001 is deleted');
};示例代码
下面是一个简单的示例代码，展示如何在 PWA 应用中使用 IndexedDB 存储和读取数据：
-- -------------------- ---- -------
-- -----
--- ------- - -----------------------------
--------------- - -------- -- -
--------------------- ------ -- -------
--
----------------- - -------- -- -
-- -------
--- -- - ---------------
--- ----------- - ---------------------------- -------------
--- ----------- - ------------------------------------
--- ------- - -
--- ------
----- -------
---- ---
------ --------- --------
--
--- --- - -------------------------
------------- - -------- -- -
------------------- --------
--
-- ----
--- ---- - -----------------------
-------------- - -------- -- -
--- ------ - ------------
--------------------
--
--总结
在本文中，我们介绍了 IndexedDB 这种 Web 存储技术以及如何在 PWA 应用中使用这种技术来存储和检索大规模数据。通过 IndexedDB，开发者可以在客户端存储、检索和修改大量结构化数据，而无需借助外部数据库。
高效的本地数据存储和检索方案是 PWA 应用中重要的一环，IndexedDB 是 PWA 应用的首选方案之一。我们建议开发者掌握 IndexedDB，以便在 Web 应用中使用 IndexedDB 实现灵活的本地数据存储方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654c93ed7d4982a6eb609542