目录
基于indexedDB的第三方库---localForage
是什么
浏览器内置的 提供 客户端存储 大量结构化数据 基于js面向对象的 非关系型数据库
为什么需要indexedDB/使用场景
当我们有需要大量的数据存储,且需要存储复杂的数据格式,且能支持高效搜索出想要的数据,当页面/应用再次进入想实现秒开时 ,indexedDB就是为了解决这些问题而存在的。
使用场景:
- 官网一些不常变化的页面数据实现秒开;
- 即时通信,需要存储大量数据;
- 数据可视化,大屏,大量数据,每次请求很耗费性能的;
有什么特点
- 支持事务:即一系列的操作,只要一步失败,就会回滚到上一个事务状态;
- 存储空间大:以GB为单位,存储大量结构化数据在本地磁盘当中
- 异步操作:与session/localStorage在js执行中需要同步执行拿到结果不同,indexDB相关的api操作都是异步的,防止阻塞主程序
- 存储的形式:键值对形式
- 非关系型数据库:关系型数据库mySql可以通过n列,来定义表的字段;可以通过外键/关联关系表,来进行表与表之间建立管理,实现连表查询。indexeddb只有固定2列(key,value),所有查询都通过key来查询,无法建立存储仓之间关系(类似于表),不支持连表查询。
- 持久化存储:与session/localStorage在清除浏览器缓存自动清楚掉信息不同,indexedDB不手动清除则一致都在。离线可用。
- 同源策略:不同源的数据库不可共享
与浏览器其他的存储方式对比
关键概念理解
- store :仓库名(indexeddb中没有表的概念,因为它是非关系型数据库,这里的store可以理解为关系型数据库中的表的概念,一个store就是一个表)
- index:索引 (加快查找速度)
- cursor:游标(指针)类似于数组的filter()api,但是需要手动continue 继续向下扫描;
- 如果要查询满足某个条件的所有数据,则需要使用游标,变动指针,一条条扫描,将符合条件的数据,可以进行对应整合并返回。(indexedDB只能通过 索引,主键,游标,进行数据查询;)
- 事务:访问并可能更新 数据库中各数据项 的操作执行单元。由事务从开始到结束的一系列操作组成。
事务特点:
符合acid原则;indexedDB所有对于仓库的操作都是基于事务的!!
- atomicity:原子性;一系列操作组成一个事务,不可分割,最小单元。
- consistency:一致性,;
- 一系列操作一旦有环节出错,则回滚到上个状态;或者都成功到下一个状态;
- 不存在部分成功而改变一部分数据的情况;
- isolation:隔离性;并发事务互不干扰;
- durability:持久性;事务一旦被提交,对于数据库的更改是永久的;
浏览器兼容性
如何使用
基本模式如下:
- 打开数据库。
- 在数据库中创建一个对象存储(object store)。
- 启动事务,并发送一个请求来执行一些数据库操作,如添加或获取数据等。
- 通过监听正确类型的 DOM 事件以等待操作完成。
- 对结果进行一些操作(可以在 request 对象中找到)
以上模式践行,可以参考具体代码。
github仓库地址https://github.com/zhangpanjun/indxedDB.git
缺陷处理
-
存储磁盘满了,会被无感知删除掉存的数据吗?
windows存储位置:
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\IndexedDB
数据清除:
当存入的数据达到可用磁盘的上限时,配额管理器会根据一定规则删除一部分数据,而这些删除对于用户来说是无感知的。因此,
- 合理存储数据,并在合理时机删除不需要的数据,控制整体空间
- 多种缓存手段相结合,做好备份
-
不同浏览器兼容性怎么处理?
基于indexedDB封装的第三方库localForage 优雅降级,如果支持indexedDB则使用,否则WebSQL,或者localStorage。兼容性磨平,无需关注内部实现,只需使用对应api关注业务本身。
基于indexedDB的第三方库---localForage
localForage是一个类似于localStorage的缓存存取api的第三方库,基于indexedDB封装,但根据配置驱动的先后顺序及浏览器的支持程度,实现indexedDB/webSql/localStorage不同方式存储,优雅降级,兼容性更高。
特点:
- 有类似于localStorage类似的api,学习成本低
- 几乎所有的api都是异步操作,执行api后的结果需要.then()或者callback中可拿到
- 提供简单的检索和存储,都是围绕唯一键而展开的。无 索引,游标的概念,也不支持连表查询。(若想使用索引和游标的api,请使用indexedDB底层写法来实现,但需自行处理相关兼容问题)
- 根据配置,可选择存储数据的位置,(容量大小,以存储位置而决定)内部封装对应降级逻辑,无需过多关注底层,聚焦于业务实现即可。
使用模式如下:
- 在html中引入localForage.min.js
- 在下一个中即可直接通过localforage.具体api()即可直接访问
代码实践请参考:
github仓库地址https://github.com/zhangpanjun/localForage.git
引用链接:
IndexedDB API: IndexedDB - Web API | MDN
localforage: localForage 中文文档