IndexedDB 的学习与封装 dl-gldb

1,345 阅读5分钟

什么是 IndexedDB?

通俗地说,IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。

就数据库类型而言,IndexedDB 属于关系型数据库(不支持 SQL 查询语句),数据格式可使用 JSON 对象。

简而言之,Indexdb就是可供前端在浏览器上使用的数据库。

IndexedDB 的优点

  1. 存储空间大:没有存储上限,一般来说不小于 250M
  2. 存储格式多样:
    • 支持字符串存储
    • 支持二进制存储(ArrayBuffer 对象和 Blob 对象)
    • 支持 JSON 键值对存储,一个对象相当于关系型数据库中的数据表,我们称其为 对象仓库 (object store)
  3. 异步操作:性能更强。防止进行大量数据读写时,拖慢网页(localStorage 的操作是同步的)
  4. 同源限制:每一个数据库对应一个域名。只能访问自身域名下的数据库,不能跨域访问
  5. 支持事务:在一系列操作步骤之中,如果有一步失败,那么整个事务就都会取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况

IndexedDB 的基础概念

一、ObjectStore

IndexedDB 是 key-value 数据库,具体体现就是 objectStoreobjectStoreindexedDB 的数据存储机制,和 SQL 的的地位一致。每一条记录包含了 key 和 value。

indexedDB 之所以将自己的存储机制称为 objectStore,在 store 前面加上 object,是因为它所存储的记录的集合,就像一个 object 一样,是一个 key-value 的集合。

二、Index

索引是 indexedDB 中最值得玩味的部分,这也是它取名“indexedDB”的原因。 索引,是一系列概念的统称:

  • 用于存储索引的空间被称为“索引”,例如我们可以称 objectStore 的一个索引
  • 某条记录的索引也被称为“索引”,例如我们可以称 value 的 indexName 索引

简单的说,索引是独立于 objectStore 之外,但又和 objectStore 绑定的,用于建立更多查询线索的工具。

本质上,一个 index 是一个特殊的 objectStore,它的存储结构和 objectStore 基本一致,也有自己的 name(本文标记为 indexName), keyPath, key 和 value。特殊之处在于,索引的 key 具有一定的逻辑约束,例如 unique 用于规定该 key 是唯一的。

三、Index 和 ObjectStore 的关系

index 依附于 objectStore。我们在创建索引时,首先要得到一个 objectStore,再在这个 objectStore 的基础上创建一个索引。一个 objectStore 可以有多个索引。

index 实际上是对 objectStore 查询条件的补充。如果没有 index,我们只能通过 objectStore 的 key 来查值,但是有了 index,我们可以查询的能力被扩展到了任意属性路径。

四、Transaction

所有结构完备的数据库中都有“事务”这个概念,它是为了确保当并非执行某些操作时,不致混乱。

indexedDB 里面的事务,保证了所有操作(特别是写入操作)是按照一定的顺序进行,不会导致同时写入的问题。另外,indexedDB 里面,强制规定了,任何读写操作,都必须在一个事务中进行。

补充:由于js是单线程运行程序,所以对于所有事务而言,也是有先后顺序的,只有当某些事务完成之后,才会进入后面当事务,因此即使一个 objectStore 存在于多个事务中,它也会按照事务出现当先后顺序被操作,而不是被不同当事务交叉操作。另外,对一个 objectStore 的写入操作的事务只允许存在一个,它会自动根据你传入的 mode 值为 readwrite 时进行判断和报错。

知道有事务的存在之后,一定要注意 indexedDB 事务的生命周期。一个事务,它会把你在它的生命周期里面规定的操作全部执行,一旦执行完,周期结束,那么事务就关闭了,你不能再利用这个事务的实例进行下一步操作。

五、Cursor

虽然 indexedDB 使用 objectStore 存储数据,是一个 key-value 数据库。但是,我们有遍历所有记录的需求。cursor 游标,就是 indexedDB 提供的遍历整个 objectStore 的能力接口。

IndexedDB 的封装库 dl-gldb

 dl-gldb 是一个包含了一系列针对 indexdb API 的动作封装的对象。其中所有的动作API 执行都会返回一个 Promise    dl-gldb 内部处理了 IndexedDB 对事务的需求。是使用者只需要简单调用方法就可以了,不需要太多的关心 IndexedDB 内部的需求。

1630751259(1).jpg

IndexedDB 的使用场景

  • cookie:短期登陆,例如:token 会过期,需要设置过期时间,过期后重新换取 token
  • sessionStorage:敏感账号一次性登录
  • localStorage:长期登录
  • indexedDB:存储大量结构化数据数据

对于简单的数据,应该继续使用 localStorage;对于大量结构化数据,IndexedDB 会更适合。当然如果你需要设置过期时间的短期存储,还是使用 cookie 存储吧。

目前博主也是准备在公司的项目中使用 IndexedDB 去处理大文件下载,针对 IndexedDB 可以存储二进制数据的特性来实现大文件分片下载和断点续载。在 dl-gldb 中的 demo2 也是针对文件切片存储的一个demo。

后期博主也是规划使用 IndexedDB 来存储指定模块的页面数据,来实现页面数据的本地缓存效果。

总结

学习 IndexedDB ,主要使用通过 唐霜 大佬的 IndexedDB 的中文教程 的博文来学习的。大佬的文档写的十分的细致。膜拜~~

对于博主来说,学习 IndexedDB 的过程中。一开始对于事务索引的概念是比较难理解的。博主也只能通过对各个API 的demo调试来加强理解,希望想要学习 IndexedDB 的同学,不要被其晦涩的理论知识给劝退,多写一些demo或者可以试试博主封装的 dl-gldb库,加油!!谢谢!!

传送门