indexedDB学习

IndexedDB: https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API
IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象(blobs))。该 API 使用索引实现对数据的高性能搜索。

2021.4.6 星期二 14:20

此特性在 Web Worker 中可用。
注意: 正如大多数的 web 储存解决方案一样,IndexedDB 也遵守同源策略。

关键概念和用法

IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。 然而,不像 RDBMS 使用固定列表,IndexedDB 是一个基于 JavaScript 的面向对象数据库。

同步和异步(Synchronous、asynchronous)

使用 IndexedDB 执行的操作是异步执行的,以免阻塞应用程序。

储存限制和回收标准

IndexedDB 浏览器存储限制和清理标准

储存限制

浏览器的最大存储空间是动态的——它取决于您的硬盘大小。 全局限制为可用磁盘空间的50%。
还有另一个限制称为组限制——这被定义为全局限制的20%,但它至少有10 MB,最大为2GB。

LRU策略

接口

参见

localForage:一个简单的 Polyfill,提供了简单的客户端数据存储的值语法。它在后台使用 IndexedDB,并在不支持 IndexedDB 的浏览器中回退到 WebSQL 或 localStorage。
Dexie.js:IndexedDB 的包装,通过简单的语法,可以更快地进行代码开发。
ZangoDB:类似 MongoDB 的 IndexedDB 接口,支持 MongoDB 的大多数熟悉的过滤、投影、排序、更新和聚合功能。
JsStore:一个带有 SQL 语法的 IndexedDB 包装器。
MiniMongo:由 localstorage 支持的客户端内存中的 mongodb,通过 http 进行服务器同步。MeteorJS 使用 MiniMongo。
PouchDB:使用 IndexedDB 在浏览器中实现 CouchDB 的客户端。
idb:一个微小的(〜1.15k)库,大多 API 与 IndexedDB 类似,但做了一些小的改进,让数据库的可用性得到了大大的提升。
idb-keyval:使用 IndexedDB 实现的超级简单且小巧的(~600B)基于 Promise 的键值对存储。
sifrr-storage:一个非常小的(~2kB)基于 Promise 的客户端键值数据库。基于 IndexedDB、localStorage、WebSQL 和 Cookies 实现。它可以自动选择上述支持的数据库,并按照优先顺序使用。
lovefield:Lovefield 是一个用于 Web App 的关系型数据库,使用 JavaScript 编写,可以在不同的浏览器环境中运行,提供了类似 SQL 的 API,速度快、安全且易用。

浏览器数据库 IndexedDB 入门教程

特点

IndexedDB 具有以下特点。
(1)键值对储存。
(2)异步。
(3)支持事务。
(4)同源限制
(5)储存空间大
(6)支持二进制储存。

(8)能够为数据建立索引,以此提高查询数据的各方面性能。
indexedDB概述

概念

IDBFactory:数据库工厂,负责打开或者创建数据库

IDBDatabase: 数据库

store,相当于表

IDBIndex:数据库表的索引
IDBObjectStore:数据库表
IDBTransaction:事务
IDBRequest:机会是所有 indexedDB 操作的返回值,indexedDB 操作请求

操作请求:IDBRequest 对象
指针: IDBCursor 对象
主键集合:IDBKeyRange 对象

应用场景

区块链项目,服务端只存储加密字符串:客户端(electron)需要下载大量的加密数据,然后批量解密,并且提供排序和数据流转。所以前端没数据库是不行的
配合Electron做一个桌面应用
需要存储大量数据的应用,比如图书管理系统这类的需要存储大量数据的应用,完全可以将图书信息存储在IndexedDB中
配和service worker构建pwa应用,用来缓存网络请求
离线日志:Tent-reflow

扩展须知

大小限制

在 Chrome 正常模式下
如果命中了should remain available的值 的配额将为零,对临时存储的其他写操作将失败。如果尚未达到should remain available值,则配额将为共享池的20%。

在 Chrome 隐身模式下
固定 100MB 的大小

IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象),所以我们可以把图片或者 3D 模型文件转化成 Blob 格式的文件,存在 IndexedDB 中,就可以解决免去二次加载时网络请求的时间。

取值相关
key值能够接受的数据类型
key path能够接受的数据类型
value能够接受的数据类型

清空缓存
用户在清除浏览器缓存时,可能会清除IndexedDB中相关的数据。

访问权限
部分浏览器如Safari手机版隐私模式在访问IndexedDB时,可能会出现由于没有权限而导致的异常(LocalStorage也会),需要进行异常处理。

对比

从上面的例子中可以看出,每一次操作需要至少三行代码才能完成,而且需要一直维护 DB 的对象引用,避免它被回收,这样子开发代码膨胀得太厉害,所以我们在业务中引入其他类库来减少代码量

LocalForage
可以指定数据存储方案,默认依次为 IndexedDB、WebSQL、LocalStorage,意味着当前 IndexedDB 失效可以有兜底措施。
API 简化为 CRUD ( getItem、removeItem、setItem、clear )
库大小为 475b

Pouchdb
API 简化为 put、get、remove,基于 promise 来检查回收错误
有较好的错误日志机制, 如失败,冲突等等,方便调试
库大小为 255b

Web SQL

由于 Web SQL 的规范已经废弃,官方说法是因为无法走标准化的流程,大概意思是你都用 SQL 了,本身就是一个标准化的东西,每个浏览器实现几乎一样,没有多样性了,没法进行标准的演进,所以废弃了。

This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.

其他

knowledge is no pay,reward is kindness
0%