indexedDB概念和实践

zhangpanjun

已于 2024-09-13 10:44:02 修改

阅读量1k

点赞数 12

CC 4.0 BY-SA版权

文章标签： db 数据库 database

于 2024-09-11 14:57:33 首次发布

本文链接：https://blog.youkuaiyun.com/zhangpanjun/article/details/142139811

存储磁盘满了，会被无感知删除掉存的数据吗？

不同浏览器兼容性怎么处理？

基于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底层写法来实现，但需自行处理相关兼容问题)
根据配置，可选择存储数据的位置，（容量大小，以存储位置而决定）内部封装对应降级逻辑，无需过多关注底层，聚焦于业务实现即可。