什么是 IndexedDB
IndexedDB 是浏览器内置的数据库，允许 Web 应用程序存储大量的结构化数据，并允许您执行高效的查询。IndexedDB 采用对象存储机制，也就是说，它存储的是对象而不是字符串或 JSON。
IndexedDB 操作入门
打开数据库
在 IndexedDB 中创建一个数据库之前，需要先打开它。使用以下代码打开一个名为 "myDatabase" 的数据库。
const request = indexedDB.open("myDatabase", 1);open 方法接受两个参数 - 数据库名称和版本号。如果数据库不存在，则会自动创建一个新的数据库。
创建表格
在数据库中创建表格之前，您需要创建一个对象存储区域。对象存储区域是一个存储数据对象的位置，每个对象存储区域可以存储多个数据对象。以下代码创建了一个名为 "myTable" 的对象存储器以及一个唯一的键索引。
request.onupgradeneeded = function(e) {
const db = e.target.result;
const store = db.createObjectStore("myTable", { keyPath: "id", autoIncrement: true });
store.createIndex("uniqueId", "id", { unique: true });
};现在，您已经成功创建了一个名为 "id" 的自增键和一个名为 "uniqueId" 的索引，这表示在 "myTable" 表格中，每个对象都会有一个唯一的 "id" 编号，并且该编号不会重复。
添加数据
将数据添加到数据库中的步骤如下：
-- -------------------- ---- -------
----------------- - ----------- -
----- -- - ----------------
----- -- - ------------------------- -------------
----- ----- - --------------------------
----- ---- - - ----- ----- ---- -- --
----- ------- - ----------------
----------------- - ----------- -
----------------------------
--
------------- - ---------- -
-----------
--
--首先，需要创建一个事务（transaction），事务用来包含一个操作序列，并且可以确保一系列操作要么全部成功，要么全部失败。在该事务中，使用 objectStore 从数据库中获取 "myTable" 表格，并使用 add 方法将数据添加到该表格中。
读取数据
读取数据的步骤如下：
-- -------------------- ---- -------
----------------- - ----------- -
----- -- - ----------------
----- -- - ------------------------- -------------
----- ----- - --------------------------
----- ----- - ------------------------
----- ---------- - ----------------
-------------------- - ----------- -
-----------------------------
--
------------- - ---------- -
-----------
--
--在该事务中，首先使用 objectStore 从数据库中获取 "myTable" 表格，然后使用 index 方法获取 "uniqueId" 索引，使用 get 方法获取带有 "id" 键值的数据对象，并将其打印到控制台上。
更新数据
更新数据的步骤如下：
-- -------------------- ---- -------
----------------- - ----------- -
----- -- - ----------------
----- -- - ------------------------- -------------
----- ----- - --------------------------
----- ---- - - --- ---- ----- ----- ---- -- --
----- ------- - ----------------
----------------- - ----------- -
----------------------------
--
------------- - ---------- -
-----------
--
--在该事务中，使用 objectStore 从数据库中获取 "myTable" 表格，并使用 put 方法来更新 "id" 为 123 的数据对象。
删除数据
删除数据的步骤如下：
-- -------------------- ---- -------
----------------- - ----------- -
----- -- - ----------------
----- -- - ------------------------- -------------
----- ----- - --------------------------
----- ------------- - ------------------
----------------------- - ----------- -
----------------------
--
------------- - ---------- -
-----------
--
--在该事务中，使用 objectStore 从数据库中获取 "myTable" 表格，并使用 delete 方法删除 "id" 为 123 的数据对象。
总结
通过本文的介绍，您已经学会如何打开数据库、创建表格、添加、读取、更新和删除数据。这些技能对于开发 PWA 应用非常重要，尤其是当您需要缓存大量数据时。在实际应用中，您还需要学习各种 IndexedDB API 和操作技巧来更好地满足您的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c4da4e83d39b488183db7f