Dexie JS(Indexed DB)：Chrome扩展中按钮点击无法读取数据库问题

核心原因 #

你在buttonB的点击逻辑里犯了两个关键错误：

1. 未声明数据库表结构：即使IndexedDB里已经存在test数据库和friend表，Dexie实例必须通过version().stores()明确声明schema后，才能生成对应的表对象（db.friend）。直接初始化Dexie实例而不定义表结构，Dexie无法识别已有的表，所以db.friend会返回undefined。
2. 错误处理异步查询：就算表对象存在，db.friend本身是Dexie的Collection对象，不是实际数据，直接打印不会输出存储的值，需要用异步方法（如toArray()、get()）获取数据。

修正后的代码 #

import { Dexie } from '../node_modules/dexie/dist/dexie.mjs';

// 统一初始化数据库，避免重复创建实例和声明结构
const DBName = 'test';
const db = new Dexie(DBName);
// 只需要声明一次表结构，后续实例复用即可
db.version(2).stores({
    friend: '++id, name'
});

buttonA.addEventListener('click', async () => {
    const inp = document.getElementById("inp");
    // 用async/await处理异步操作，确保数据存入成功
    await db.friend.add({
        name: inp.value
    });
    console.log('数据已存入');
});

buttonB.addEventListener('click', async () => {
    // 用toArray()获取所有数据，或者用get(id)获取单条数据
    const allFriends = await db.friend.toArray();
    console.log("数据库中的值: ", allFriends);
    
    // 如果要获取最新添加的一条数据，可以用orderBy('id').last()
    const latestFriend = await db.friend.orderBy('id').last();
    console.log("最新存入的值: ", latestFriend?.name);
});

关键改动说明 #

• 统一数据库初始化：把Dexie实例创建和表结构声明移到事件监听外，只执行一次，避免重复初始化带来的问题，同时确保表对象能被正确识别。
• 异步操作处理：使用async/await处理Dexie的异步方法（add()、toArray()等），确保操作完成后再执行后续逻辑。
• 正确获取数据：通过toArray()获取表中所有数据，或者用排序方法获取特定数据，直接打印Collection对象无法得到实际存储的值。

内容的提问来源于stack exchange，提问作者Frontend pain