前言
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弱
