Async IndexedDB js API test

We are very excited about the new IndexedDB feature implemented in Firefox 4.0. Although for now only the async API is available, it is still a big step ahead for everyone who wants to create customizable webpages, storable user data, offline-capable sites etc.

The IndexedDB standard is drafted by the w3c from scratch (but happily for web developers, with feedback from both Mozilla, Google AND Microsoft), and so it does not really resemble what the majority of us have gotten used to with SQL. It is deliberately very low-level in order to enable all kinds of higher-level APIs to easily build on top of it (I suppose we will soon be having Dojo or jQuery IndexedDB plugins). For now however, even checking if and how it works is a bit of a nuisance – and as our inborn curiosity did not allow us to refrain from testing this very promising feature, we set out to write something more accessible. We used the code provided at: http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/ but made it a bit more interactive so that everyone can see how much fun IndexedDB is without having to write any code. Grab the file here:

db_async.zip

Of course this is a very early draft, do not expect top performance or faultless operation from how we went about this. We were trying to accomodate all possible exceptions etc., but we can’t promise that you won’t be able to break it! More functions are coming soon of course; we just guessed it will be better to show it now so that with your help perhaps we can arrive at better solutions instead of polishing it forever only to learn it was not really how it was meant to be used :)

The functions provided now are:

• IDB_openDB – opens or creates an indexed database
• IDB_createStore – creates a store
• IDB_openStore – opens an existing store
• IDB_insert – inserts an array of data into a store
• IDB_getAll – gets all the elements in a store
• IDB_clear – clears a store

All of them have to be assigned callbacks – otherwise there is no way to tell when they finish and if they are successful. But once you get the drift of using them, it is really easy! Let us look at an example:

var currentDB = null;
var dbName = document.getElementById("databaseName").value;
var onDBopen = function(db,existed) {
    currentDB = db;
    document.getElementById("currentDatabase").textContent = dbName;
    message("Database '"+dbName+"' " + ((existed)?"opened":"created")+".");
}
IDB_openDB(dbName, onDBopen);

This very simple callback tells us if the database was present or not before we called the async function. What does it look like underneath? Again, very simple:

function IDB_openDB(dbName, onFinish) {
    var request = window.moz_indexedDB.open(dbName, "Database " + dbName);
    request.onsuccess = function(event) {
        var db = event.result;
        if (db.version != "1") {
            db.setVersion("1").onsuccess = function(event) {
                onFinish(db, false);
            };
        }
        else
            onFinish(db, true);
    }
}

Basically, we just call the callback with appropriate parameters when things happen and this way we have a good imitation of a function ‘returning’ values.

One bonus feature we decided to do is that you can use both the db name and the db object (much faster) when calling all functions (of course except the IDB_openDB).

Things to do:

• indexes
• removing databases and stores
• functions manipulating single records (get by id etc.)
• ranges etc.