前言
在现代 web 应用程序中，提供更好的离线支持是一个重要的问题，因为用户希望花费最少的时间、最少的数据来获取必要的信息，而 PWA 通过使用本地缓存和本地数据库工具，可以使这一点变得更加容易。
其中 IndexedDB 作为 HTML5 内置的浏览器数据库之一，在 PWA 中发挥了极其重要的作用，本文将详细介绍 IndexedDB 的使用方式，并提供多个实例供学习和参考。
IndexedDB 简介
IndexedDB 是 HTML5 中的一个 API，用于在浏览器中存储和检索单独对象的高性能低级别浏览器数据库。IndexedDB 是本地数据库，允许应用程序在浏览器内存储结构化数据，并且在离线时访问这些数据。IndexedDB 与传统 SQL 数据库的不同之处在于，它使用类似 NoSQL 的键值对存储方法。
IndexedDB 有几个重要的概念：
- 数据库：存储数据的容器。
- 对象存储：一个存储对象的容器。
- 对象：包含您要存储的数据。
- 记录：对象存储中的单个数据项。
- 键/值对：在 IndexedDB 中存储的数据是一个键值对结构。
IndexedDB的实现步骤
使用 IndexedDB 的步骤如下：
- 打开数据库，如：
const request = indexedDB.open("dbName");
如果不存在名为 dbName 的数据库，则会创建它，否则打开它。
- 创建对象存储 ( 创建表 )，如：
const store = db.createObjectStore("storeName", {keyPath: "id"});
这将创建一个名为 storeName 的对象存储，并定义了 id 属性作为主键，他被用于索引存储的对象。
- 将数据添加到对象存储，如：
const transaction = db.transaction(["storeName"], "readwrite"); const objectStore = transaction.objectStore("storeName"); const object = {id: 1, name: "Tom"}; const request = objectStore.add(object);
该代码通过一个名为 storeName 的事务，将对象 {id: 1, name: "Tom"} 存储到对象存储中。
- 检索数据，如：
const transaction = db.transaction(["storeName"], "readonly"); const objectStore = transaction.objectStore("storeName"); const request = objectStore.get(1); request.onsuccess = function(event) { console.log(event.target.result); };
这里创建了名为 storeName 的事务，并检索了 id 为 1 的对象。
- 更新数据，如：
const transaction = db.transaction(["storeName"], "readwrite"); const objectStore = transaction.objectStore("storeName"); const request = objectStore.put({id: 1, name: "Jerry"});
在一个名为 storeName 的事务中，将 id 为 1 的对象中的 name 属性更新为 "Jerry"。
- 删除数据，如：
const transaction = db.transaction(["storeName"], "readwrite"); const objectStore = transaction.objectStore("storeName"); const request = objectStore.delete(1);
在具有名为 storeName 的事务中，删除 id 为 1 的对象。
IndexedDB实例
下面是两个实例，分别涉及创建和读写操作。
实例一：创建IndexedDB
本实例演示如何使用 IndexedDB 来创建和打开一个名为 "myDatabase" 的数据库，并向其中添加一个对象存储。
-- -------------------- ---- ------- -- -------- ----- ------- - ----------------------------- --------------- - --------------- - ------------------- -- ---- ----------- -- -- ----------------- ----------------------- - --------------- - ----- -- - -------------------- ----- ----------- - ----------------------------- - -------- ---- --- ------------------------------- ------- - ------- ----- --- -------------------------------- -------- - ------- ---- --- -- -- -------- ----------------- - --------------- - --------------------- ------ --------------- --展开代码
在上面的实例中，我们首先创建了一个名为 “myDatabase” 的数据库，如果该数据库已经存在则直接打开。在 onupgradeneeded 事件中，我们定义了一个名为 “users” 的对象存储，它的主键为 id，并为其创建了两个索引。当对象存储创建成功时，我们在 onsuccess 事件中输出了一个消息。
实例二：读/写IndexedDB
本实例演示如何读取和更新 "users" 对象存储中的数据。
-- -------------------- ---- ------- -- -------- ----- ------- - ----------------------------- --------------- - --------------- - ------------------- -- ---- ----------- -- -- ----------------- ----------------------- - --------------- - ----- -- - -------------------- ----- ----------- - ----------------------------- - -------- ---- --- ------------------------------- ------- - ------- ----- --- -------------------------------- -------- - ------- ---- --- -- -- ------ ----------------- - --------------- - ----- -- - -------------------- ----- ----------- - ------------------------- ------------ ----- ----------- - --------------------------------- ----- ------- - --------------------- ----------------- - --------------- - --------------------------------- -- -- -- ---- ----------------- - --------------- - ----- -- - -------------------- ----- ----------- - ------------------------- ------------- ----- ----------- - --------------------------------- ----- ------- - ----------------- --- -- ----- ------ ------ ---------------- ------ ------------ --- ----------------- - --------------- - ----------------- ------- --------------- -- --展开代码
在上面的实例中，我们首先使用了我们在实例一中创建的 “myDatabase” 数据库，并打开了 “users” 对象存储。在读取完整数据时，我们首先定义了一个只读事务，并使用了该对象存储的 getAll() 方法来获取全部数据，这里的 event.target.result 返回所有数据。
在更新数据时，我们使用了一个读写事务，并使用了对象存储的 put() 方法来更新 id 为 1 的数据。这里的 request.onsuccess 输出了一个消息，表示 user 更新成功。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c22fdb314edc2684b40031
