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:
Attached .zip file: 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:
1 2 3 4 5 6 7 8 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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.
I want to know how to update data that was inserted in a object store once. I was not able to obtain the answer that satisfied it though I had questioned at http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/. Do you know how to update data that was inserted in a object store once? If you know, could you present it to me?
P.S. After I commented at 07:40, I was able to know how to update data that was inserted in a object store once. To update data, I need to use “modify” method or “addOrModify” method. How to use them is related to how to create a object store. Thank you.