Title: Why does window.indexedDB evaluate to undefined? (How to use IndexedDB?)
Tags: javascript;html;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
Comment: @pst I have added a JSFiddle page above.  I am running `Firefox 8.0.1` and `Chrome 15.0.874.121 m`  the `IndexedDB` works in both these browsers just fine, just not the code above for me

Comment: @pst I don't think so.  On this page here http://html5-demos.appspot.com/static/html5storage/index.html#slide34 there is a demo you can add and remove items from the DB and it is working in both my browsers

Comment: `window.indexedDB` is undefined then. Find the browser/environment that demo is for (a *recent* Webkit? Safari?). Don't expect it to work elsewhere :)

Comment: I wonder if it has to be enabled somehow. I can't get *either* openDatabase or indexedDB to work, as per http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/

Comment: Definitely something else to do with the page. Open up the FF Web-Console on SO: `window.indexedDB` evaluates to `undefined`. Open up the FF Web-Console on the linked slide: `window.indexedDB` evaluates to `[object IDBFactory]`.

Here is the accepted answer: 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.

Here is another answer: A slightly shorter version (based on names from modernizr):
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.moz_indexedDB;

Here is another answer: 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;
Comment for this answer: I hear ya jasondavis. The reason I'm working on the project is because of the complexity. I'm in rewrite three of an IndexedDB-based app. In the first round, I found myself writing the same low-level code over and over -- transactions, cursors, etc. So I created a thin but simplified API over the core stuff. Round two, I found myself writing the same convenience methods on top of that core stuff, so I made the low level plumbing private and exposed a new even more simplified API. The hope is that it can maintain the flavor oif IndexedDB without scaring away developers like yourself.
Comment for this answer: thanks for the post, I looked at your project.  I wish they would of stuck with the WebSQL instead of IndexedDB it seems so much more complex
Comment for this answer: My goodness. They couldn't have used `window.webkit|moz|foo.whatever`? :(
Comment for this answer: Doesn't modernizr do this for you? Or does it only handle the indexedDB object itself?

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 5, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2011:00:12/01/11', 'FavoriteCount': 2.0, 'PostTypeId': 1, 'Tags': '<javascript><html><indexeddb>', 'Title': 'Why does window.indexedDB evaluate to undefined? (How to use IndexedDB?)', 'ViewCount': 5607, 'id': 8349702, 'user_AboutMe': '<h2>PHP/MySQL \n  is my flavor of choice however more recently JavaScript is really becoming something I enjoy developing with!  Writing code since 2000\'</h2>\n\n<p>Currently working heavily with <strong>SugarCRM</strong><br>\n+<br>\nLaunching my Web Dev company <a href="http://www.apollowebstudio.com" rel="nofollow">ApolloWebStudio.com</a>  </p>\n\n<p><em>"Premature \noptimization is not the root of all evil,</em><em><br>\n lack of proper \nplanning is the root of all evil." </em></p>\n\n<p>Twitter: <a href="http://twitter.com/#!/JasonDavisFL" rel="nofollow">@JasonDavisFL</a><br>\nWork: <a href="https://www.apollowebstudio.com" rel="nofollow">Apollo Web Studio - https://www.apollowebstudio.com</a>  </p>\n\n<p>Some of my Web Dev skills, self rated...  </p>\n\n<pre><code>+------------+--------+------+--------------+    \n| Skill      | Expert | Good | Intermediate |    \n+------------+--------+------+--------------+    \n| PHP        | X      |      |              |    \n+------------+--------+------+--------------+    \n| MySQL      | X      |      |              |  \n+------------+--------+------+--------------+  \n| Javascript |        X      |              |  \n+------------+--------+------+--------------+  \n| jQuery     |        X      |              |  \n+------------+--------+------+--------------+  \n| CSS+CSS3   |        X      |              |  \n+------------+--------+------+--------------+  \n| HTML+HTML5 | X      |      |              |  \n+------------+--------+------+--------------+  \n| Photoshop  |        | X    |              |  \n+------------+--------+------+--------------+  \n| Web Dev    | X      |      |              |  \n+------------+--------+------+--------------+  \n| SugarCRM   | X      |      |              |  \n+------------+--------+------+--------------+  \n| Magento    |        | X    |              |  \n+------------+--------+------+--------------+  \n| WordPress  | X      |      |              |  \n+------------+--------+------+--------------+  \n| SEO        | X      |      |              |  \n+------------+--------+------+--------------+   \n| Marketing  | X      |      |              |  \n+------------+--------+------+--------------+  \n|Social Media| X      |      |              |  \n+------------+--------+------+--------------+   \n</code></pre>\n', 'user_AccountId': 48179.0, 'user_DisplayName': 'JasonDavis', 'user_Reputation': 47236.0, 'user_Views': 4182.0, 'user_id': 143030.0}}