前端数据库:IndexedDB 基础使用

前言

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

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

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

大容量:通常可以存储几百 MB 甚至 GB 级别的数据,非常适合需要离线存储的应用。
异步操作:所有操作都是非阻塞的,不会让页面卡顿。
复杂查询:支持索引和游标,可以高效地查询和遍历数据。
事务支持:可以确保数据的完整性和一致性。
举个简单的例子,如果你在开发一个需要用户离线使用的笔记应用,或者一个需要存储大量用户数据的复杂表单,IndexedDB 绝对是你的好帮手!

2. indexedDB 数据库的使用

2.1. 查看indexedDB

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

前端数据库:IndexedDB 基础使用

前端数据库:IndexedDB 基础使用

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

2.2. 打开和创建数据库

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

前端数据库:IndexedDB 基础使用

前端数据库:IndexedDB 基础使用

Open() 参数

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

第一个参数(必传):数据库名称。用于指定你要打开或创建的数据库的名称。
第二个参数(可选):数据库版本号。不传默认值为 1。
在我们成功创建数据库后,可以通过浏览器的开发者工具中 Application 面板直观地看到数据库的名称以及当前版本号

前端数据库:IndexedDB 基础使用

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

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

Open() 返回值

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

前端数据库:IndexedDB 基础使用

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

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

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

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

2.3. 创建一个对象存储表

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

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

前端数据库:IndexedDB 基础使用

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

前端数据库:IndexedDB 基础使用

createObjectStore 参数

  1. name:第一个参数, 表示储存表的名称
  2. keyOptions: 第二个参数(可选参数), 是配置对象,
  • keyPath: 储存数据的标识符
  • autoIncrement:默认为false,若为true,则会自动在储存的对象上添加标识符属性,并附上一个自增的正数值(1,2,3,4…)

3. IndexedDB 核心操作

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

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

前端数据库:IndexedDB 基础使用

在 IndexedDB 中,`transaction` 方法用于创建一个事务对象,以便对指定的存储对象进行操作。`transaction`方法接收两个参数:
第一个参数是一个数组,数组中包含此事务将会处理的存储对象名称;
第二个参数是事务的处理模式,比如 readonly 或 readwrite,分别表示只读和读写模式。
一旦事务创建成功,我们可以监听事务的 complete 和 error 事件,以处理事务完成或出错的情况。接下来,我们可以通过事务对象对指定的 myObjectStore 执行操作

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

前端数据库:IndexedDB 基础使用

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

前端数据库:IndexedDB 基础使用

3.2. 添加数据

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

添加数据示例:

前端数据库:IndexedDB 基础使用

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

前端数据库:IndexedDB 基础使用

3.3. 更新数据

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

前端数据库:IndexedDB 基础使用

3.4. 查询数据

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

前端数据库:IndexedDB 基础使用

3.5. 删除数据

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

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

前端数据库:IndexedDB 基础使用

阅读剩余
THE END