IndexedDB is an API for client-side storage of significant amounts of structured data and for high performance searches on this data using indexes. While DOM Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution.
This page is basically the entry point for the technical description of the API objects. If you need a primer you should consult Basic Concepts About IndexedDB. For a lot more details, see Using IndexedDB.
IndexedDB provides separate APIs for synchronous and asynchronous access. The synchronous API is intended to be used only inside of Web Workers but it isn't implemented by any browser yet. The asynchronous API works both within and without Web Workers, but Firefox hasn't implemented this yet.
Asynchronous API
The asynchronous API methods return without blocking the calling thread. To get asynchronous access to a database, call open() on the indexedDB attribute of a window object. This method returns an IDBRequest object (IDBOpenDBRequest); asynchronous operations communicate to the calling application by firing events on IDBRequest objects.
Note: The indexedDB object is prefixed in older browser versions (property mozIndexedDB in Gecko < 16, webkitIndexedDB in Chrome, and msIndexedDB in IE 10).
IDBFactoryprovides access to a database. This is the interface implemented by the global objectindexedDBand is therefore the entry point for the API.IDBCursoriterates over object stores and indexes.IDBCursorWithValueiterates over object stores and indexes and returns the cursor's current value.IDBDatabaserepresents a connection to a database. It's the only way to get a transaction on the database.IDBEnvironmentprovides access to a client-side database. It is implemented by window objects.IDBIndexprovides access to the metadata of an index.IDBKeyRangedefines a range of keys.IDBObjectStorerepresents an object store.IDBOpenDBRequestrepresents a request to open a database.IDBRequestprovides access to results of asynchronous requests to databases and database objects. It is what you get when you call an asynchronous method.IDBTransactionrepresents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or write) that you want.IDBVersionChangeEventindicates that the version of the database has changed.
An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:
IDBVersionChangeRequestrepresents a request to change the version of a database. The way to change the version of the database has since changed (by callingIDBFactory.open()without also callingIDBDatabase.setVersion()), and the interfaceIDBOpenDBRequestnow has the functionality of the removedIDBVersionChangeRequest.IDBDatabaseExceptionrepresents exception conditions that can be encountered while performing database operations.
There is also a synchronous version of the API. The Synchronous API has not been implemented in any browser. It is intended for use with WebWorkers.
Storage limits
There isn't any limit on a single database item's size. However there may be a limit on each IndexedDB database's size. This limit (and the way the user interface will assert it) may vary from one browser to another:
-
Firefox: no limit on the IndexedDB database's size. The user interface will just ask permission for storing blobs bigger than 50 MB. This size quota can be customized through the
dom.indexedDB.warningQuotapreference (which is defined in http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js). - Google Chrome: see https://developers.google.com/chrome...rage#temporary
Example
A powerful example of what IndexedDB can be utilized for on the web is the example by Marco Castelluccio, winner of the IndexedDB Mozilla DevDerby. The winning demo was eLibri, a library and eBook reader application.
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Asynchronous API |
24.0 |
16.0 (16.0) 4.0 (2.0) moz |
10 | 15.0 | Not supported |
| Synchronous API (used with WebWorkers) |
Not supported | Not supported See bug 701634 |
Not supported | Not supported | Not supported |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Asynchronous API | Not supported | 6.0 (6.0) moz | Not supported | Not supported | Not supported |
There is also the possibility of using IndexedDB on browsers that support WebSQL by using an IndexedDB Polyfill or Shim.
See also
- Basic Concepts About IndexedDB
- Using IndexedDB
- Storing images and files in IndexedDB
- A simple TODO list using HTML5 IndexedDB. Note: This tutorial is based on an old version of the specification and does not work on up-to-date browsers: for example, it still uses the removed
setVersion()method. - Indexed Database API specification
- IndexedDB — The Store in Your Browser
- IndexedDB Examples
- IndexedDB Polyfill/Shim for browsers that only support WebSQL (e.g. mobile WebKit)
- JQuery IndexedDB plugin

