不靠谱的IndexedDB踩坑记录
由于做项目需要,在使用Vue开发的前端项目中实现了聊天功能,并且最终采用的是IndexedDB来存放聊天记录(这里使用了融云作为第三方云平台进行聊天功能的实现,历史消息可以拉取但是认为必要性不大)。得益于MDN上不靠谱的api和百度到的消息的无用,实现的一点点功能却也踩了不少坑的感觉。首先说一下需求:1.新建数据库2.查询/插入/删除数据3.清空数据4.删除数据库以上前三个需求,
由于做项目需要,在使用Vue开发的前端项目中实现了聊天功能,并且最终采用的是IndexedDB来存放聊天记录(这里使用了融云作为第三方云平台进行聊天功能的实现,历史消息可以拉取但是认为必要性不大)。
得益于MDN上不靠谱的api和百度到的消息的无用,实现的一点点功能却也踩了不少坑的感觉。
首先说一下需求:
1.新建数据库
2.查询/插入/删除数据
3.清空数据
4.删除数据库
以上前三个需求,都可以对应IndexedDB实例的Database实例去调用解决,MDN上也给出了基本的代码示例,对部分知识点解释一下:
1.database.open方法打开的数据库,如果进行的操作会对数据库内容进行修改(包括修改数据库结构或者数据),则需要使用一个新的版本号进行打开
2.上面提到的新的版本号,只能>=原本的版本号
3.IndexedDB数据库存放的是对象而不是结构化的数据,这点要有所认识。对于索引的建立和使用,MDN上也说得还算明白,不在赘述
4.注意对数据库的操作(包括打开),都是异步操作。如
return new Promise((resolve, reject) => {
let request = indexedDB.deleteDatabase(db.name)
request.onerror = (event) => {
console.log('删除数据库失败')
reject('删除数据库失败')
}
request.onsuccess = (event) => {
console.log('数据库已删除')
resolve()
}
})
这里执行的是删除数据库的操作,其他操作大致相同,都是执行操作后,通过 .onsuccess或 .onerror的回调函数进行操作结果的获取以及进一步操作(这里我是写了Promise以让异步结果能够返回)
5.最大的坑,删除数据库操作是IndexedDB实例上的操作(如上代码所示)…
5.5之后记–是的我一直以为也是在database实例上一直找api一直找不到各种百度“indexeddb删除数据库”都是只有删除记录等等…最终曲线救国跑去删除objectStore(于是这里明明要删除数据库了我还要修改版本号打开数据库再删除仓库巴拉巴拉…)
好的就说这么多了。关于IndexedDB的用法没有研究太多,有关的优缺点、局限性也没有仔细去研究,但是目前感觉可以满足需求。
主要是记录一下自己踩过的一个小坑。
使用什么技术栈关键在于你的需求是什么,比如vuex的使用。
更多推荐
所有评论(0)