Saving ArrayBuffer in IndexedDB
-
27-10-2019 - |
Question
How can I save binary data (in an ArrayBuffer object) into IndexedDB?
The IndexedDB spec doesn't mention ArrayBuffer - does that mean that is not supported (and I have to pack ArrayBuffer as a string or a an array?).
Solution
In the latest (nightly) builds of FF this is very easy. See this bug.
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(arrayBuffer);
var myblob = bb.getBlob();
indexedDB.open("mydatabase").onsuccess = function(e) {
var db = e.result;
var trans = db.transaction(["objectstore1", "objectstore2", READ_WRITE);
trans.objectStore("objectstore1").put(myblob, "somekey");
trans.objectStore("objectstore2").put(myblob, "otherkey");
};
even:
objectStore.put({ name: "Santa", age: 400, height: 185, img: myblob});
There's an open bug for the same in Chrome: crbug.com/108012
OTHER TIPS
Simply saving the ArrayBuffer should "just work". I believe it does in all current IndexedDB implementations.
I.e. something like:
var trans = db.transaction("mystore", IDBTransaction.READ_WRITE); // or "readwrite"
trans.objectStore("mystore").put(myArrayBuffer, "mykey");
Finding that this is defined by specifications is... challenging... to say the least. But it goes something like this:
- IndexedDB uses the "structured clone" definition for all stored data.
- "structured clone" is defined in the HTML5 specification and mentions a lot of data types native to Javascript and a few other types like Files and Blobs.
- The ArrayBuffer specification from Khronos defines ArrayBuffers and specifies that the HTML5 definition of "structured clone" should be changed to also clone ArrayBuffers.
Yeah, I know, I wouldn't have found it either.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow