Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)

like image 436
Eldon Lesley Avatar asked Jun 23 '14 09:06

Eldon Lesley


1 Answers

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.');
};
like image 161
Kaiido Avatar answered Nov 15 '22 11:11

Kaiido