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

ops/2025/3/18 4:03: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批量删除})