设计思路
固定数据表
- 键值对表
用于存储数据库相关的信息 - 库字段构成表
储存非固定数据表结构
非固定数据表
通过库字段构成表进行创建或更新
划重点
- 数据库初始创建或更新后会先触发onupgradeneeded方法，然后再触发onsuccess方法，如果在onupgradeneeded方法中执行了表结构操作的话，onsuccess会在transaction.oncomplete事件处理之后触发，所以在onsuccess方法中去执行增删改一定是在表完整结构基础上不必担心表错误
先上封装的代码
class indexedDBClass {
db
tableName
keyPath
// 连接数据库
openDB(dbName) {
return new Promise((resolve, reject) => {
const request = indexedDB.open(dbName);
// 创建或更新成功
request.onupgradeneeded = (e) => {
const db = e.target.result;
this.initDB(db);
};
// 连接成功
request.onsuccess = (e) => {
resolve(e.target.result);
};
// 连接失败
request.onerror = (e) => {
reject(e.target.errorCode);
};
});
}
// 初始化数据库
initDB(db) {
this.keyPath = 'id'
const objStore = db.createObjectStore(this.tableName, { keyPath: 'id' });
objStore.createIndex('name', 'name', { unique: false })
}
// 插入一条数据
putDataOnce(obj) {
return new Promise((resolve, reject) => {
let request = this.db.transaction([this.tableName], 'readwrite').objectStore(this.tableName).put(obj)
request.onsuccess = function () {
resolve()
}
request.onerror = function () {
reject()
}
})
}
// 插入数据
putData(list) {
let arr = [].concat(list)
return new Promise((resolve, reject) => {
Promise.all(arr.map(v => this.putDataOnce(v)))
.then(res => {
resolve()
}).catch(err => {
reject()
})
})
}
// 通过主键删除数据
delDataByKeyPath(keyPath) {
return new Promise((resolve, reject) => {
let request = this.db.transaction([this.tableName], 'readwrite').objectStore(this.tableName).delete(keyPath)
request.onsuccess = function () {
resolve()
}
request.onerror = function () {
reject()
}
})
}
// 删除数据
delData(obj) {
// 由于只能通过主键删除数据，所以要先根据条件进行查询，后逐条进行删除操作
return new Promise((resolve, reject) => {
this.getData(obj).then(res => {
return Promise.all(res.map(v => this.delDataByKeyPath(v.id)))
}).then(res => {
resolve()
}).catch(err => {
reject()
})
})
}
// 获取数据
getData(obj) {
const objectStore = this.db.transaction(this.tableName).objectStore(this.tableName);
let objKeyList = Object.keys(obj)
return new Promise((resolve, reject) => {
let arr = []
objectStore.openCursor().onsuccess = ({ target: { result } }) => {
if (result) {
if (objKeyList.every(v => obj[v] === result.value[v])) {
arr.push(result.value)
}
result.continue();
} else {
resolve(arr)
}
}
})
}
// 构造方法
constructor(tableName, cb, dbName = '***') {
this.tableName = tableName;
this.openDB(dbName).then((res) => {
this.db = res;
cb()
});
}
}
使用的时候先创建数据库表
collegeDB = new indexedDBClass('college', () => {
// 这里的'college'是表名，数据库名默认为'***',可以传第三个参数更换数据库名
// 使用数据库的代码都要在这里面运行，不然会出现数据库未链接就使用的情况
// 获取数据（参数是匹配条件）
let list = await collegeDB.getData({ name: '张三' })
// 新增&插入数据（参数是完整的要存储的数据）
await collegeDB.putData(list)
// 删除数据（参数是匹配条件）
await collegeDB.delData({ name: '张三' })
})
整个使用下来给我一种就是把数据存在本地的错觉，而且相当不好用，特别是批量处理相当不友好，对于布尔值的搜索还会报错（所以获取数据变成获取全部数据再用js匹配筛选），个人感觉自己写页面玩一玩就得了，要不是谷歌不支持websql我是真的不想研究这玩意