Why does window.indexedDB evaluate to undefined? (How to use IndexedDB?)

Question

I am messing around with HTML5's IndexedDB.

Below is a simple code from http://html5-demos.appspot.com/static/html5storage/index.html#slide31 that is not working for me in Chrome or Firefox, it is giving me this message in Firebug:

Uncaught TypeError: Cannot call method 'open' of undefined`

for the 1st line of the code, which is:

var db = window.indexedDB.open('FriendDB', 'My Friends!');  // exception here

Can someone help me to get this working please?

There is a JSFiddle running the code

---

I know this works on the browser because this interactive slide works: http://html5-demos.appspot.com/static/html5storage/index.html#slide34

Answer 1

You have to use the prefixed version for each browser (window.webkitIndexedDB or window.mozIndexedDB). Then you can do something like:

window.indexedDB = window.indexedDB
                     || window.webkitIndexedDB
                     || window.mozIndexedDB;

and then use window.indexedDB everywhere in your code.

Answer 2

As far as vendor prefixed extensions in Chrome, if you want to use the full IndexedDB API there's more to it than just window.indexedDB. I'm working on an MIT licensed IndexedDB wrapper. Here's a simplified version of its fixBrowser() method in case it might be of help. It should standardized the interface across Chrome and FF.

InDB.fixBrowser = function () {
    if ( 'webkitIndexedDB' in window ) {
        window.IDBCursor = window.webkitIDBCursor;
        window.IDBDatabase = window.webkitIDBDatabase;
        window.IDBDatabaseError = window.webkitIDBDatabaseError;
        window.IDBDatabaseException = window.webkitIDBDatabaseException;
        window.IDBErrorEvent = window.webkitIDBErrorEvent;
        window.IDBEvent = window.webkitIDBEvent;
        window.IDBFactory = window.webkitIDBFactory;
        window.IDBIndex = window.webkitIDBIndex;
        window.IDBKeyRange = window.webkitIDBKeyRange;
        window.IDBObjectStore = window.webkitIDBObjectStore;
        window.IDBRequest = window.webkitIDBRequest;
        window.IDBSuccessEvent = window.webkitIDBSuccessEvent;
        window.IDBTransaction = window.webkitIDBTransaction;
        window.indexedDB = window.webkitIndexedDB;
    } else if ( 'mozIndexedDB' in window ) {
        window.indexedDB = window.mozIndexedDB;
    }
}

Answer 3

A slightly shorter version (based on names from modernizr):

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.moz_indexedDB;