前端数据库: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。
在我们成功创建数据库后,可以通过浏览器的开发者工具中 Application 面板直观地看到数据库的名称以及当前版本号
当你需要升级数据库结构(例如新增或修改对象存储空间)时,可以通过指定一个更高的版本号来触发 upgradeneeded 事件,进而完成数据库的更新操作。
这两个参数为 open() 方法提供了灵活性,既确保了操作的明确性,也为数据库的版本管理提供了支持。
Open() 返回值
open() 方法会返回一个 IDBOpenDBRequest 对象,这是因为 IndexedDB 中的所有操作(包括打开、读取、编辑和删除) ,都是异步执行的。由于这些操作可能需要一定的时间才能完成,无法立即返回结果,因此 IDBOpenDBRequest 对象提供了一系列事件绑定机制,方便我们在操作的不同阶段(如成功、失败或数据库需要升级时)进行相应的处理。通过监听这些事件,开发者可以更灵活地控制数据库操作的流程和响应
在 IndexedDB 中,版本号是一个重要的机制,用于管理数据库的更新和变更。当我们尝试打开一个数据库时,系统会检查当前是否存在该数据库:
如果数据库不存在,IndexedDB 会自动创建一个新的数据库,并将其版本号初始化为 1。
如果数据库已存在,则会根据传入的版本号与当前保存的版本号进行比较:
如果传入的版本号比当前版本更高,IndexedDB 会触发upgradeneeded事件,此时开发者可以在事件回调中执行数据库的更新操作(例如创建、修改或删除对象存储表)。
传入的版本号不能低于当前版本号,因为 IndexedDB 的版本号是单向递增的,不允许回退到旧版本。
2.3. 创建一个对象存储表
当创建一个新的数据库或对现有数据库进行版本升级时,IndexedDB 会触发一个 onupgradeneeded 事件。在该事件中,通过访问 event.target.result,我们可以获取到 IDBDatabase 实例。借助这个实例,开发者可以执行诸如创建、修改或删除对象存储表等数据库升级操作,从而完成数据库结构的更新。
其基本使用方式如下所示:
创建成功后,就可以在控制台中查看到创建的存储空间
createObjectStore 参数
name
:第一个参数, 表示储存表的名称keyOptions
: 第二个参数(可选参数), 是配置对象,
keyPath
: 储存数据的标识符autoIncrement
:默认为false,若为true,则会自动在储存的对象上添加标识符属性,并附上一个自增的正数值(1,2,3,4…)
3. IndexedDB 核心操作
3.1. 开启事务获取存储对象
indexedDB的所有操作都需要在事务中,我们看一个开启事务的操作:
在 IndexedDB 中,`transaction` 方法用于创建一个事务对象,以便对指定的存储对象进行操作。`transaction`方法接收两个参数:
第一个参数是一个数组,数组中包含此事务将会处理的存储对象名称;
第二个参数是事务的处理模式,比如 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
方法删除数据时, 需要传入主键, 根据主键删除。