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

前端存储-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弱


http://www.kler.cn/a/585857.html

相关文章:

  • Nodejs+MySQL数据库管理
  • 手势调控屏幕亮度:Python + OpenCV + Mediapipe 打造智能交互体验
  • 3ds Max 导入到 After Effects 还原摄像机要注意事项--deepseek
  • 掌握市场先机:9款销售渠道管理工具深度测评
  • 蓝桥杯备考:01背包之优化问题。
  • Android应用出海之Klarna登录以及kakao登录
  • 【DeepSeek】一文详解GRPO算法——为什么能减少大模型训练资源?
  • axis=0 和 axis=1的区分设置matplotlib正常显示中文和负号
  • 在 Django 中通过 `/media/xxxx` URL 访问上传资源的安全性与实践
  • 神经网络中常用语言特性(python)(待完善)
  • GD32F4xx系列单片机-串口配合DMA的使用
  • 悬镜夫子ASPM数字供应链安全态势感知平台
  • JAVA中的多态性以及它在实际编程中的作用
  • 前端笔试高频算法题及JavaScript实现
  • iWebOffice2015 中间件如何在Chrome107及之后的高版本中加载
  • wepy微信小程序自定义底部弹出框功能,显示与隐藏效果(淡入淡出,滑入滑出)
  • Linux中grep、sed和awk常见用法总结
  • vscode怎么debug vue项目
  • 68.Harmonyos NEXT 图片预览组件应用实践(一):相册与社交场景
  • C++刷题(一):顺序表 + 单链表