在 PWA 应用中使用 IndexedDB 实现本地数据存储
一、背景介绍
PWA（Progressive Web App）是一种全新的、能够带来原生应用体验的 Web 应用，也被称为渐进式 Web 应用。大多数 PWA 应用都需要在离线或网络不稳定的情况下提供核心服务。而在这种情况下，当用户无法访问服务器上的数据时，本地存储就显得尤为重要。
IndexedDB 是一种浏览器内置的本地数据库，它可以很好地为 PWA 应用提供离线存储能力。在这篇文章中，我们将讨论如何在 PWA 应用中使用 IndexedDB 实现本地存储功能。
二、IndexedDB 概述
- IndexedDB 是什么
IndexedDB 是浏览器内置的非关系型数据库，与传统的关系型数据库有所不同。它旨在通过浏览器内部存储数据，以提供本地数据存储的能力。IndexedDB 的主要特点是：
- 支持事务操作
- 支持索引查询
- 支持存储大量数据
这使得 IndexedDB 在处理大量数据方面比其他前端本地存储解决方案更加出色。它使用类似于对象存储的方式来存储数据。
- IndexedDB 的基本概念
IndexedDB 中的基本概念如下：
- 数据库：IndexedDB 中的核心概念是数据库。可以将其看作是存放一系列表（即对象存储）的容器。
- 对象存储：一个对象存储可以看作是 IndexedDB 中的一个表。每个对象存储都有一个独特的名称，并包含许多键值对。
- 索引：可以使用索引来快速访问对象存储中的数据。IndexedDB 中的索引类似于 SQL 中的索引。
三、实现本地存储
- 创建数据库
在使用 IndexedDB 实现本地存储之前，我们需要创建数据库。创建数据库的方法是使用 indexedDB.open 方法，该方法接收两个参数：数据库名称（字符串类型）和数据库的版本号（整数类型）。如果版本号发生更改，浏览器将会触发一个名为 onupgradeneeded 的事件来更新数据库。
下面是一个创建数据库的示例代码：
-- -------------------- ---- ------- --- --- --- ------ - ------------- --- --------- - -- --- ------- - ---------------------- ----------- --------------- - --------------- - --------------------- ------ - - ------------------------ -- ----------------- - --------------- - -- - -------------------- -- ----------------------- - --------------- - -- - -------------------- --- ----------- - --------------------------------- - -------- ---- --- ------------------------------- ------- - ------- ----- --- -------------------------------- -------- - ------- ---- --- --
上述代码中，我们创建了一个名为 myDatabase 的数据库，版本号为 1。在数据库创建成功之后，我们可以通过事件回调函数 request.onsuccess 来获取数据库连接对象 db。
当版本号发生更改时，onupgradeneeded 事件就会被触发。这里我们创建了一个名为 customers 的对象存储，并创建了两个索引：name 和 email。
- 添加数据
一旦我们创建了数据库和对象存储，就可以开始向数据库中添加数据了。添加数据的方法是使用对象存储中的 add 方法，它接收一个包含需要添加的数据的对象作为参数。
下面是一个向名为 customers 的对象存储中添加一条新记录的示例代码：
var transaction = db.transaction(['customers'], 'readwrite');
var objectStore = transaction.objectStore('customers');
var newCustomer = { id: 1, name: 'John Doe', email: 'john.doe@example.com' };
var request = objectStore.add(newCustomer);
request.onsuccess = function(event) {
console.log('New customer added to database.');
};上述代码中，我们创建了一个事务并指定其类型为 readwrite。然后，我们从事务中获取了名为 customers 的对象存储，并向其中添加了一条新的记录。
- 查询数据
IndexedDB 提供了一种非常灵活的方式来查询数据，即可以使用对象存储中的索引进行查找，也可以使用键值对匹配的方式查找。下面是一个使用索引查询的示例代码：
-- -------------------- ---- ------- --- ----------- - ----------------------------- ------------ --- ----------- - ------------------------------------- --- ----- - --------------------------- --- ------- - ---------------------------------- ----------------- - --------------- - --- -------- - -------------------- --------------------- ------ - - -------------------------- -- --------------- - --------------- - ------------------- -- -------- ------------ --
上述代码中，我们首先创建了一个名为 email 的索引，然后使用该索引查询了一个名为 john.doe@example.com 的客户。查询结果将会被存储在 event.target.result 变量中，我们可以将其打印到控制台中以供查看。
四、结论
本文介绍了如何在 PWA 应用中使用 IndexedDB 实现本地数据存储。我们首先介绍了 IndexedDB 的基本概念，然后讨论了如何创建数据库、添加数据以及查询数据。与其他本地存储解决方案相比，使用 IndexedDB 可以更好地处理大量数据，并提供更加灵活的查询方式。如果您正在开发 PWA 应用，那么 IndexedDB 无疑是一个非常好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670896a3d91dce0dc872b0b2