前端数据库:IndexedDB 基础使用

前言

在现代 Web 开发中，随着应用程序复杂度的增加，对本地存储的需求也越来越高。虽然 localStorage 和 sessionStorage 可以满足一些简单的数据存储需求，但当需要存储大量结构化数据或进行复杂查询时，它们就显得力不从心了。这时候，IndexedDB 就成为了一个强大的选择。本文将带你全面了解 IndexedDB 的使用，从基础操作到高级技巧，助你在项目中灵活应用。

---

1. IndexedDB 是什么？为啥要用它？

首先，IndexedDB 是浏览器内置的一个 NoSQL 数据库。它和传统的关系型数据库不同，更像是一个键值对存储，但功能更强大。它的特点可以用几个关键词来概括：

• 大容量：通常可以存储几百 MB 甚至 GB 级别的数据，非常适合需要离线存储的应用。
• 异步操作：所有操作都是非阻塞的，不会让页面卡顿。
• 复杂查询：支持索引和游标，可以高效地查询和遍历数据。
• 事务支持：可以确保数据的完整性和一致性。

举个简单的例子，如果你在开发一个需要用户离线使用的笔记应用，或者一个需要存储大量用户数据的复杂表单，IndexedDB 绝对是你的好帮手！

---

2. indexedDB 数据库的使用

2.1. 查看indexedDB

indexDB 其实是 window 对象的一个属性。 也就是全局变量。 因此我们可以在控制台直接输出

通过在控制台中输出 indexDB 对象，我们可以一目了然地看到它所提供的各种方法。

2.2. 打开和创建数据库

首先要掌握的就是它的核心方法之一 的open()。open() 方法用于打开或创建一个数据库，并返回一个 IDBOpenDBRequest 对象，这个对象代表了异步操作的请求。通过IDBOpenDBRequest ，我们可以监听数据库的打开状态，并进一步执行后续操作。

Open() 参数

让我们来详细了解一下 open() 方法的两个参数：

1. 第一个参数(必传)：数据库名称。用于指定你要打开或创建的数据库的名称。
2. 第二个参数(可选)：数据库版本号。不传默认值为 1。

在我们成功创建数据库后，可以通过浏览器的开发者工具中 Application 面板直观地看到数据库的名称以及当前版本号

当你需要升级数据库结构（例如新增或修改对象存储空间）时，可以通过指定一个更高的版本号来触发 upgradeneeded 事件，进而完成数据库的更新操作。

这两个参数为 open() 方法提供了灵活性，既确保了操作的明确性，也为数据库的版本管理提供了支持。📚

Open() 返回值

open() 方法会返回一个 IDBOpenDBRequest 对象，这是因为 IndexedDB 中的所有操作(包括打开、读取、编辑和删除) ,都是异步执行的。由于这些操作可能需要一定的时间才能完成，无法立即返回结果，因此 IDBOpenDBRequest 对象提供了一系列事件绑定机制，方便我们在操作的不同阶段（如成功、失败或数据库需要升级时）进行相应的处理。通过监听这些事件，开发者可以更灵活地控制数据库操作的流程和响应。

在 IndexedDB 中，版本号是一个重要的机制，用于管理数据库的更新和变更。当我们尝试打开一个数据库时，系统会检查当前是否存在该数据库：

如果数据库不存在，IndexedDB 会自动创建一个新的数据库，并将其版本号初始化为 1。

如果数据库已存在，则会根据传入的版本号与当前保存的版本号进行比较：

• 如果传入的版本号比当前版本更高，IndexedDB 会触发upgradeneeded事件，此时开发者可以在事件回调中执行数据库的更新操作（例如创建、修改或删除对象存储表）。
• 传入的版本号不能低于当前版本号，因为 IndexedDB 的版本号是单向递增的，不允许回退到旧版本。

注意，这里的版本号是一个整数。如果你传入一个float，那么将会对该float进行取整操作。

2.3. 创建一个对象存储表

当创建一个新的数据库或对现有数据库进行版本升级时，IndexedDB 会触发一个 onupgradeneeded 事件。在该事件中，通过访问 event.target.result，我们可以获取到 IDBDatabase 实例。借助这个实例，开发者可以执行诸如创建、修改或删除对象存储表等数据库升级操作，从而完成数据库结构的更新。

其基本使用方式如下所示：

创建成功后,就可以在控制台中查看到创建的存储空间

createObjectStore 参数

1. name：第一个参数, 表示储存表的名称
2. keyOptions: 第二个参数(可选参数), 是配置对象，

• keyPath: 储存数据的标识符
• autoIncrement：默认为false，若为true，则会自动在储存的对象上添加标识符属性，并附上一个自增的正数值（1，2，3，4…）

3. IndexedDB 核心操作

3.1. 开启事务获取存储对象

indexedDB的所有操作都需要在事务中，我们看一个开启事务的操作：

在 IndexedDB 中，`transaction` 方法用于创建一个事务对象，以便对指定的存储对象进行操作。`transaction`方法接收两个参数：

1. 第一个参数是一个数组，数组中包含此事务将会处理的存储对象名称；
2. 第二个参数是事务的处理模式，比如 readonly 或 readwrite，分别表示只读和读写模式。

一旦事务创建成功，我们可以监听事务的 complete 和 error 事件，以处理事务完成或出错的情况。接下来，我们可以通过事务对象对指定的 myObjectStore 执行操作

在操作数据之前，咱们得先通过事务调用 objectStore 方法，拿到要操作的存储对象。这个方法会返回一个 IDBDatabase 类型的存储对象实例。有了这个实例，咱们就可以调用它的各种方法来操作数据了。

通过输出的存储对象实例，我们可以直接查看其提供的各种操作方法，从而通过这些方法操作存储数据。

3.2. 添加数据

获取到存储对象后, 就可以调用它提供的 add 方法来新增数据。

添加数据示例:

数据添加成功后，你可以去查看数据表里的内容。这时候你会发现，数据里多了一个 id 属性，这就是这条数据的唯一标识符。这是因为前面咱们设置了自动生成 id 的功能。如果没设置的话，那就得手动给数据添加一个 id 属性了。但要注意，id 的值必须唯一，不能和其他数据重复，不然添加就会失败。

3.3. 更新数据

要更新数据，可以使用put()方法。使用 put 方法更新数据时，如果数据不存在则会添加。

3.4. 查询数据

通过 get 方法或游标查询数据。调用get方法需要传入主键id

3.5. 删除数据

通过delete方法删除单个条目或者clear 方法删除整个对象。

使用 delete 方法删除数据时, 需要传入主键, 根据主键删除。

---

总结

本文全面介绍了 IndexedDB 的核心概念和使用方法，包括数据库的创建与升级、对象存储表的构建、数据的增删改查以及事务管理。通过详细的代码示例和清晰的步骤说明，读者可以快速上手并灵活应用 IndexedDB，满足复杂 Web 应用对本地存储的需求。无论是离线应用开发还是大容量数据管理，IndexedDB 都能成为你的得力助手。

如果觉得本文对你有帮助，希望能够给我点赞支持一下哦 💪 也可以关注wx公众号：程序员付杰 ，一起学习编程技能