Update 2012-08-25: At the moment I am working on a somewhat related mini-series about Offline Web Applications.

I have been playing around with IndexedDB for a while now, and now I want to write about my first impression. A couple of days ago I was looking for a way to enable a webpage to store data at the client - in the browser. I found some tutorials about Web Database and immediately liked it (because I immediately understood it). But I soon found out that spec is deprecated and you should use IndexedDB instead.

So, IndexedDB it was. At first it looked rather complicated to me, but in fact it is quite easy to use. I found some good tutorials, of which I liked this todo-list and Mozilla’s “Using IndexedDB” best.

What I found out pretty quickly was that there is no easy way to delete a database. This is a real problem when you want to test the code that creates the database - or when you simply want to wipe all data. I found this tutorial to delete the database but this is really cumbersome. In Google Chrome there is a slightly easyer way: Go to “Options” - “Under the hood” - “Content Settings” - “All Cookies and Site Data” - “localhost” and delete the “Indexed Database”. The problem here is that this does not always work.

Otherwise developing with IndexedDB is pretty cool. The database is versioned, so you can decide when to update. The onupgradeneeded handler from the mozilla tutorial did not work for me, so I chose the way of the todo-list tutorial. Here is the code to start the update:

var oldVersion = db.version;
if(v!= db.version) {
	var setVrequest = db.setVersion(v);

	setVrequest.onsuccess = function(e) {
		//...
	}
	//...
}

The first problem I had here was that I could not check for db.version in setVrequest.onsuccess because it already contained the new version. Also, only running the newest update is not an option, since the user might have missed an update. I came up with the following code (in the example I use my own version number scheme):

setVrequest.onsuccess = function(e) {
	console.log("updating from "+oldVersion+" to "+v);
	while(oldVersion != v) {
		if(oldVersion === "v01ds02") {
			//perform update
			oldVersion = "v01ds03";
		} else if(oldVersion === "v01ds01") {
			//perform update
			oldVersion = "v01ds02";
		} else {
			//create database
			oldVersion = "v01ds01";
		}
		console.log("updated to version "+oldVersion);
	}
};

I am not sure if this is the best way to do it, but it works. If anybody knows a better way please email me or contact me on twitter or google+.

Accessing data through the asynchronous API is pretty easy and the description in the tutorials mentioned above is very good. The only thing I had to get used to is that you normally only query indexes - you don’t write queries like in SQL, you just obtain objects from an index. But this somehow makes sense, I guess queries are always fast this way.

So, my first impression about IndexedDB is: I like it, but it definitely needs better development support and better error messages. Deleting an IndexedDB has to be really easy, otherwise testing is a real pain. And some of the error messages printed by Chrome and Firefox made me really scratch my head - I just couldn’t decifer them and I had to resort to trial and error programming.