HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 31

IndexedDB

As mentioned in the previous lesson, HTML5 includes specifications for three distinct APIs that allow data to be stored inside the browser. This lesson introduces the IndexedDB API.

The IndexedDB API is considerably more advanced than the web storage API. Therefore, if the web storage API meets all your needs, you may opt to skip this lesson.

The IndexedDB API does, however, offer the following benefits over the web storage API:

• It allows various data types to be stored rather than simple strings. For example, it is possible to store JavaScript objects directly in IndexedDB.
• It allows more sophisticated retrieval mechanisms. For example, it is possible to query IndexedDB for a specific record, such as a single contact, based on its unique ID.
• It allows create, update, and delete operations to be included in transactions. This means you can perform a set of operations and guarantee that they will either all ­succeed or all fail. If you are familiar with relational databases, this will be a familiar concept.
• It is capable of automatically generating unique keys for records. This will mean you do not need to rely on mechanisms such as the current time in milliseconds, as you saw in the previous lesson.
• Browsers typically allow far more data to be stored in IndexedDB as opposed to web storage.

Note

Unlike the web storage API, the IndexedDB specification does not state how much storage space must be allocated to each domain. Browsers typically either place ...