CODEWITHSUNDEEP
javascripthtmlindexeddb
Eldon Lesley
Eldon Lesley

Reputation: 925

What is the per-record size limit of indexedDB?

I am building a file storage for HTML5, and I am using indexedDB as the storage, I ask the files from the server via xmlHttpRequest with the response type as arrayBuffer (for chrome) and blob (for other browsers).

Everything is fine even if the files-collection size is 500MB or more, (hey, it can even reach GB). But I noticed something strange when I add the file to the indexedDB, it will trigger error when the single file exceeds ~120MB, so it is not stored. But when the file is less than 120MB, it will store it.

Notice that it will only have this error when storing a single file > 120MB, for example, an .mp4 file of 200MB will trigger an error, but if I have 5 videos with each of them have a size of 100MB (so the total will be 500MB) it will be all fine.

I would like to know whether this is a limit-rule or some glitch and the two have the same error. I didn't find any documentation about it. I tested it in IE and Chrome.

EDIT: Ok, I got this error apparently in the add or put function of indexedDB when storing the file:

inside the e.target.error.message:

The serialized value is too large (size=140989466 bytes, max=133169152 bytes)

Upvotes: 10

Views: 3972

Answers (2)

Kaiido
Kaiido

Reputation: 136708

At the time this question was asked, Chrome still didn't support saving Blobs to IndexedDB, it only came the next month.

For anyone facing the same issue nowadays, store Blobs or Files directly, not ArrayBuffers.

Contrarily to ArrayBuffers, saving a Blob to IDB doesn't require to serialize its data, the serialization steps of a Blob are just to make a snapshot of the js object and keep the link to the same underlying byte sequence, which itself is not cloned.
The only limit you should face would be the one of the db itself.

Code taken from Chrome's announcement:

var store = db.transaction(['entries'], 'readwrite').objectStore('entries');

// Store the object  
var req = store.put(blob, 'blob');
req.onerror = function(e) {
    console.log(e);
};
req.onsuccess = function(event) {
    console.log('Successfully stored a blob as Blob.');
};

Upvotes: 2

Cerin
Cerin

Reputation: 64739

I think this is an issue with your browser's implementation of IndexedDB. I ran into this same error myself in Firefox, when I tried to store a 100 MB file into a IndexedDB record, but the identical code worked fine in Chrome. It seems different browsers have different implementation quirks and limits.

Personally, I suspect this is a bug in Firefox, since Firefox grants the requested size, but then prevents single-record usage of that entire size, whereas Chrome is more forgiving.

Upvotes: 0

Related Questions