前端存储-indexdb封装:dexie.js的使用
前言
indexedDB是一个用于在浏览器中存储较大数据结构的Web API,并且提供了索引功能以实现高性能查找。dexie.js是对indexdb的封装,前端用起来很方便。在此介绍一下项目中用到的操作语句,也方便记录。我的项目是vue3项目。
开始
1、安装
npm install dexie
2、使用
首先新建一个全局文件db.js,用来定义项目中用到的表。注意定义时候表中用到什么字段就定义什么字段,不能多也不能少。之所以用全局文件是便于维护和修改。
我的vue项目目录 根目录/utils/db.js:
import Dexie from 'dexie'
const db = new Dexie('YingjingDB');
db.version(1).stores({
agents: 'id, agentId, name',
chats: 'id, agentId, userId, conversationId, lastMessage,date',
});
export default db
1、增加
批量增加:
在页面里我需要给agents这个表存入数据,操作如下:
<script setup>
import db from '@/utils/db.js';
async function getAgentList(){
//...异步请求回来agentList数组
let agentList = await ...
await db.open();
await db.agents.bulkPut(agentList);
}
getAgentList();
</script>
db.agents.bulkPut(agentDBList)
bulkPut为往agents的表里批量插入agentList数据。如果在此步骤报错,大部分原因是因为存储时候的字段和db.js里定义的字段不一致!!
增加一条:
await db.agents.add({
id:'xxx',
agentId: new Date().getTime(),
name: '张三'
})
2、查询
查询一个键名:
let res = await db.chats
.where('agentId')
.equals('a1')
.toArray();
或者多个键名联合查询:
let res = await db.chats
.where(['agentId','userId'])
.equals(['a1','u1'])
.toArray();
3、删除(默认键名为id)
删除一个:删除id为1的这条数据
await db.chats.delete(1)
批量删除:删除id为1,2的两条数据
let idList=[1,2]
await db.chats.bulkDelete(idList);
批量删除:删除键名为xxx的数据
db.chats
.where('conversationId')
.equals('c1')
.delete()
4、更新:更新键名为xxx的这一条的数据,可更改单个字段的数据
db.chats
.where('conversationId')
.equals('c1')
.modify({lastMessage:'666'})
5、联合使用
如:查找固定键名,排序,并批量删除
await db.chats.where(['agentId','userId']).equals(['a1','u1']).sortBy('date').then(async res=>{
console.log(res) // 通过date字段正序排列的数组
let idList = []
res.forEach(item=>{
idList.push(item.id)
})
await db.chats.bulkDelete(idList); // 通过id批量删除
})
后记
这里记录了本项目里常用的一些操作方法。基本能覆盖项目的常用需求。dexie.js很好用,上手快,学习成本低,推荐使用。
参考文章:见识了Dexie.js,我才相信indexedDB不比SQLlite弱