I've been doing some investigation into IndexedDB lately, and one of the issues I ran into was Chrome not following the spec correctly. As a blogger I have the luxury of simply not caring and writing code just for Firefox. But I was writing an article recently and was told it would make sense to try to support Chrome. Here is what I had to do to make my article work in both browsers. Supposedly Chrome will soon support the spec so this won't matter. Till then, I hope this article is helpful for folks.

Before we get started, let's get the vendor prefix issues out of the way. Here is some code I modified from MDN to simplify my code:

The first thing I ran into involved objectStore creation. According to the spec, you can only create new objectStores when the version changes (you specify a version when you open the IndexedDB). Consider the following code:

When run in Firefox, it will correctly notice your first time run and run onupgradeneeded. I go the extra step to be really sure and check the objectStoreNames property as well.

Chrome, unfortunately, doesn't run this at all. Instead, you have to manually set the version and use the success handler for that request. Here is an expanded version of the code that supports both Firefox and Chrome.

You can see where my onsuccess for opening the connection checks the objectStoreNames properties and if necessary, runs setVersion. That returns a request object that I can use in an onsuccess handler in to create my store. Technically I've got a bit of DRY violation going on here with the objectStore definition, but you can get the idea. When Firefox runs this code, it will run onupgradeneeded first (on the initial run) so when it gets to the onsuccess for openRequest the objectStore is already created.

Once that problem was solved, the next issue I ran into was with the static constants I used to open transactions. And here is where living on the bleeding edge is not terribly fun. My initial code worked in Firefox but not in Chrome. I then made it work in both. I then updated Firefox to 13 and it stopped working. I then fixed it up for both. But wait for it - the constants are also going away in the latest spec. So given this code:

We need to change it to...

Woot. Specs are fun! Let me leave you with one last little tip. Need a quick way to get the count of an objectStore? This method will get and return the value to a callback.