Saving ArrayBuffer in IndexedDB

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?).

Answer 1

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

Answer 2

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.