CODEWITHSUNDEEP
javascripthtmlindexeddb
JasonDavis
JasonDavis

Reputation: 48933

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

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

Upvotes: 2

Views: 6118

Answers (3)

mravey
mravey

Reputation: 4500

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.

Upvotes: 6

jterrace
jterrace

Reputation: 67063

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

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

Upvotes: 1

buley
buley

Reputation: 29208

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;
    }
}

Upvotes: 3

Related Questions