javascript - 德克西JS : very large IndexedDB but empty tables

Question

我有一个应用程序，它使用普通的 javascript 来显示 openlayers map ，人们点击一个位置并可以添加图片。我使用 Dexie JS 在页面之间存储数据，直到用户准备好发送所有内容。全部上传后，记录将被删除。

但 Edge 和 Chrome 在桌面和移动设备上不断崩溃。这似乎与 IndexedDB 太大有关。

有一个“主”记录保存详细信息，还有一个“相关”表保存图像。

要添加记录，这是我的代码:

export const AddRecord = async (tablename, data) => {
let table = db.table(tablename);
let added = await table.add(data);
return added;
}

要删除记录，这是我的代码:

export const DeleteRecord = async (tablename, id) => {
let table = db.table(tablename);
let deleted = await table.delete(id);
return deleted;
}

但这并不是真正的问题。一切都被执行，上传后，记录被删除。但indexeddb一直占用空间

我清除了所有数据并从此开始

我添加了 1 条记录，其中包含一个 ID 和三个字段

存储空间已经增加了 3MB，这对于一条记录来说似乎已经很大了。但这并不重要，因为无论如何所有内容都会被删除

但是上传 25 张图像(大小在 1.5MB 到 2.5MB 之间)后，我得到了这个结果

我用来存储数据的表是空的。是什么占用了空间？我需要“清除”才能完全删除所有剩余数据吗？

Answer 1

您所描述的内容似乎与大型 ArrayBuffer 被索引时发生的情况类似 - 请参阅 https://dexie.org/docs/Version/Version.stores()#warning

根据您的描述，我不明白您如何对表进行索引，但如果是这种情况，解决方案是不要索引大型 ArrayBuffers 或 Uint8Arrays 等。仅索引您要在 where 中使用的字段查询 - 可以添加其他属性而无需建立索引。

例如，假设您已像这样声明了您的 Dexie:

const db = new Dexie('myDB');
db.version(1).stores({
  imageEntries: '++id,image'
});

然后，如果您按如下方式添加图像:

const img = new UInt8Array(size);
db.imageEntries.add({image: img});

...那么这将使数据库必须为“图像”索引以及图像数据创建大量数据。

对相关表建立索引的正确方法更像是:

const db = new Dexie('myDB');
db.version(2).stores({
  imageEntries: '++id' // Only the primary key here.
});

请记住，dexie 不会强制您列出 version().stores() 中的所有属性，而只是列出您需要查询的属性。