当前位置：首页 > article >正文

前端存储-indexdb封装：dexie.js的使用

article 2025/3/15 18:14:16

前言

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批量删除
  })