IndexedDB taking up a lot of space for simple object

Question

Im storing a JSON object, including 18 images in IndexedDB - Each image in at most 50KB, but somehow it takes 118 MB in indexedDB ? - I have no idea why it is so heavy?

Besides the images, it's all just plain JSON, mostly key/value pairs with text...

See attached screenshots

Size of indexedDB

Item in IndexedDB

Im using DexieJS for working with IndexedDB

The function that is saving to the database looks like:

  export const savePendingSurvey = (id, currentSurvey, surveyAnswers, surveyFiles) => {
const updatedSurvey = {
    id: id,
    createdAt: new Date(),
    status: 'UNSUBMITTED',
    surveyVersion: currentSurvey.survey.version,
    currentSurvey: {
        ...currentSurvey.survey
    },
    currentSurveyAnswers: [
        ...surveyAnswers
    ],
    currentSurveyFiles: [
        ...surveyFiles
    ]
};

db.open().then(() => {
    db.pendingSurveys.put(updatedSurvey).then((response) => {
        console.log('done adding pending survey', response);
    }).then(() => {
        return db.pendingSurveys.toArray();
    }).then((data) => {
        console.log('pendings surveys in db', data);
    }).catch((e) => {
        if ((e.name === 'QuotaExceededError') ||
            (e.inner && e.inner.name === 'QuotaExceededError')) {
            // QuotaExceededError may occur as the inner error of an AbortError
            alert('QuotaExceeded error! - There are not enough space available on your device');
        } else {
            // Any other error
            console.error(e);
        }
    });
});
};

It seems every time I do a simplest update to the object, even with a simple text change, it adds between 100-300kbs to the item every time :/

Answer 1

There are similar questions in Dexie issues 604 and 641. It seems that most implementations of IndexedDB does as most databases do - it adds new rows for every update and marks the old versions for later deletion. When the DB reaches a certain size, it will garbage collect old rows.