不知道大家有没有发现，我封装了后端的 MySQL，前端的 webSQL，而现在又要对 indexedDB 下手了。
为啥呢？因为有不同的使用需求：
- MySQL 后端的数据存储
- webSQL 前端仿 MySQL实现存储，做在线演示
- indexedDB 实现前端的数据缓存
indexedDB 的特点
indexedDB的特点特别适合做前端的数据缓存：
- 容量大
- 可以长久保存
- 支持object，不用做转换
封装思路
还是秉承之前的思路，先做个help实现核心功能，然后分开来实现基础的增删改查、维护等功能。
indexedDB有一个很烦人的地方，打开数据库是一个异步操作，连接对象必须在回调里面才能获得，这个就不像MySQL和webSQL，可以直接拿到数据库连接对象。
另外感觉使用起来也是很别扭，当然这可能是先入为主吧，我先学会的SQL的相关操作。
help
import { isRef, isReactive, toRaw } from 'vue'
export default class IndexedDBHelp {
constructor (info) {
this.myIndexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB
if (!this.myIndexedDB) {
console.log('你的浏览器不支持IndexedDB')
}
this._info = {
dbName: info.dbName,
ver: info.ver
}
// 记录连接数据库的对象
this._db = null
// 打开数据库
this.dbRequest = this.myIndexedDB.open(info.dbName, info.ver)
// 打开成功，记录连接对象
this.dbRequest.onsuccess = (event) => {
this._db = event.target.result // dbRequest.result
}
// 根据配置信息建立表
this.dbRequest.onupgradeneeded = (event) => {
const db = event.target.result
// 建表
const object = {
objectStoreName: 'aa'
}
// 验证有没有，没有的话建立一个对象表
if (!db.objectStoreNames.contains(object.objectStoreName)) {
// const objectStore = db.createObjectStore(object.objectStoreName, { keyPath: 'id' }) /* 创建person仓库(表) 主键 */
const objectStore = db.createObjectStore(object.objectStoreName, { keyPath: 'id' }) /* 自动创建主键 autoIncrement: true */
// 建立索引
// for (let i = 0; i < object.index.length; i++) {
// const index = object.index[i]
// objectStore.createIndex(index.name, index.name, { unique: index.unique })
// }
// if (config.debug) {
console.log('onupgradeneeded - 建立了一个新的对象仓库：', objectStore)
// }
}
}
// 根据配置信息建立表
this.dbRequest.onerror = (event) => {
// 出错
console.log('打开数据库出错：', event.target.error)
}
}
// versionchange 全能事务
// 读写的事务
beginWrite (storeName) {
return new Promise((resolve, reject) => {
const _tran = () => {
const tranRequest = this._db.transaction(storeName, 'readwrite')
tranRequest.onerror = (event) => {
// console.log('读写事务出错：', event)
console.log('读写事务出错：', event.target.error)
// eslint-disable-next-line prefer-promise-reject-errors
reject('读写事务出错：' + event.target.error)
tranRequest.abort() // 大概是回滚的意思。
}
resolve(tranRequest)
}
if (this._db) {
_tran() // 执行事务
} else {
// 检查是否已经获得了数据库的连接对象
const val = setInterval(() => {
console.log('--------', this._db)
// 检查 _db
if (this.dbRequest.readyState === 'done') {
clearInterval(val) // 取消
_tran() // 执行事务
}
}, 4)
}
})
}
// 只读的事务
beginReadonly (storeName) {
return new Promise((resolve, reject) => {
const _tran = () => {
const tranRequest = this._db.transaction(storeName, 'readonly')
tranRequest.onerror = (event) => {
// console.log('读写事务出错：', event)
console.log('只读事务出错：', event.target.error)
// eslint-disable-next-line prefer-promise-reject-errors
reject('只读事务出错：' + event.target.error)
}
resolve(tranRequest)
}
if (this._db) {
_tran() // 执行事务
} else {
// 检查是否已经获得了数据库的连接对象
const val = setInterval(() => {
console.log('--------', this._db)
// 检查 _db
if (this.dbRequest.readyState === 'done') {
clearInterval(val) // 取消
_tran() // 执行事务
}
}, 4)
}
})
}
// 删掉整个库
deleteDB () {
// 定义一个 Promise 的实例
const objectPromise = new Promise((resolve, reject) => {
// 删掉整个数据库
this.myIndexedDB
.deleteDatabase(this._info.dbName)
.onsuccess = (event) => {
resolve(event)
}
})
return objectPromise
}
// 内部函数，如果是proxy，那么获取原型，否则会报错。
_vueToObject (vueObject) {
let _object = vueObject
// 针对Vue3做的类型判断
if (isRef(_object)) {
// 如果是 vue 的 ref 类型，替换成 ref.value
_object = _object.value
}
if (isReactive(_object)) {
// 如果是 vue 的 reactive 类型，那么获取原型，否则会报错
_object = toRaw(_object)
}
return _object
}
}
为啥要引入vue？
因为vue里面经常使用reactive，但是发现如果直接存入的话会报错，需要获取原型然后在传，所以内部做了一个取原型的函数，所以才会引入vue。
同时这个也是composition API 的优点，可以在js文件里面引入，这样一些统一操作就不必在组件内部实现了。
判断是否支持
虽然现在的浏览器都支持，但是还是习惯性的先判断一下。
打开数据库，获得连接对象
这个异步操作很头疼。算了好像说不清。
建表初始化
前端的库，都需要在使用前先做好初始化的操作，比如建立表（store）添加默认数据（对象）等。
dbRequest.onupgradeneeded 就是专门做这个事情的。
这也是一个回调触发的函数，也是比较头疼。
出错的回调
dbRequest.onerror 出错了，打印一下出错的error（出错消息）
开启事务
indexedDB的各种操作，都是需要先开启事务，然后获得store，然后才能做后续的操作。（删除数据库除外）
所以这个事务也需要统一开一下。
但是在开事务之前，必须确认获得了连接对象（_db），以及建表完毕。
否则就“红”给你看。
想来想去也没想到啥好办法，所以只好做个定时器，看看连接状态。
一般的方式，都是先开库，onsuccess 之后再开启事务，这个确实没问题，但是每次都这么折腾，是不是太折腾了？
而且封装的代码也不好看。
事务模式
indexedDB 的事务分为三种模式：只读、读写、全能
-
readwrite READ_ONLY
又能读，又能写，一般作为添加、修改、删除的操作。 -
readonly READ_WRITE
只读的，一般作为获取对象的操作，当然也可以不必操心这些，默认的就好。 -
versionchange VERSION_CHANGE
允许执行任何操作，包括删除和创建对象存储和索引的操作。
此模式用于更新使用 IDBDatabase对象的 setVersion() 方法启动的事务的版本号。
此模式的事务不能与其他事务同时运行。此模式下的事务称为“升级事务”
提交事务 IDBTransaction.commit()
一般情况下，会自动提交事务，我也不知道是怎么自动提交的，反正一般不用手写 commit()
回滚事务 IDBTransaction.abort()
这个也还没有测试呢，大概是应该可以回滚的吧，官网说，这个东东会触发报错。一般不是出错了才需要回滚嘛，然后回滚了又触发报错？
删库（跑路。。。）
打开数据库和删除数据库，都是基于 window.indexedDB 实现的，所以就都写在help 里面了。
好了，核心操作就搭建起来了。
尝试写了一个 promise 版的 help ，但是感觉用起来比较麻烦，尤其是vue环境，需要在 main 里面做初始化，在组件里面做读写的情况，跨js文件的回调，我是不会写。。。
网友评论