IndexedDB - Introduction

An Introduction to IndexedDB

In the world of web development, we often need to store data on the client-side—the user’s browser. While simple key-value stores like localStorage are useful for small amounts of data, modern web applications require more powerful solutions. Enter IndexedDB.

What is IndexedDB?

IndexedDB is a low-level, transactional, object-oriented database built into modern web browsers. It allows you to store and retrieve significant amounts of structured data, including files and blobs. Unlike localStorage, it provides a true database system with features like transactions, versioning, and indexes for high-performance queries.

Because it’s an asynchronous API, it doesn’t block the user interface, ensuring a smooth user experience. IndexedDB is the cornerstone technology for enabling rich, offline-first web applications and Progressive Web Apps (PWAs).

Key Characteristics of IndexedDB

• Stores Key-Value Pairs: At its core, IndexedDB stores JavaScript objects (values) which are organized by keys. You can store almost any kind of value, from simple strings and numbers to complex objects and even files.
• Asynchronous API: All database operations are asynchronous and event-based. You make a request and listen for success or error events. This non-blocking nature is crucial for performance.
• Transactional Model: Operations are executed within transactions. A transaction is a wrapper that ensures data integrity. If any part of a transaction fails, all its operations are rolled back, leaving the database in a consistent state.
• Schema Versioning: Database schema (the structure of object stores and indexes) can only be changed through a versioning system. When you open a database with a new version number, an onupgradeneeded event fires, giving you a safe place to modify the structure.
• Same-Origin Policy: For security, an IndexedDB database is tied to a specific origin (the protocol, domain, and port of your web page). A page from https://example.com cannot access a database created by https://another-site.com.

Core Terminology

Before we dive in, let’s clarify some essential terms:

• Database: The highest-level container, identified by a name and version. It holds one or more object stores.
• Object Store: The primary mechanism for storing data, analogous to a ‘table’ in SQL databases. Each object store holds records.
• Record: A single key-value pair in an object store. The value is typically a JavaScript object, and the key is its unique identifier.
• Index: A specialized object store used to look up records by a specific property other than their primary key. Indexes make queries significantly faster.
• Transaction: A short-lived wrapper around a group of operations that guarantees data atomicity and consistency.
• Request: The object returned from any asynchronous operation. You attach event handlers (onsuccess, onerror) to it to get the result.
• Cursor: An iterator mechanism used to traverse multiple records in an object store or index one by one.

Browser Support

The IndexedDB API is a web standard and is fully supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. The old vendor prefixes (mozIndexedDB, webkitIndexedDB) are no longer necessary.

// A simple check to see if IndexedDB is available.
if (!window.indexedDB) {
    console.log("Your browser doesn't support a stable version of IndexedDB. App features will be limited.");
} else {
    console.log("IndexedDB is supported!");
}

With this foundational knowledge, you are ready to start connecting to a database and building powerful, data-driven web applications.