IndexedDB Object Stores: Your Browser's NoSQL Table

Why it exists

Browsers needed a robust way to store large amounts of structured data on the client-side, far beyond the simple key-value limitations of localStorage. IndexedDB provides a transactional database system, and Object Stores are the fundamental building blocks for holding that data.

The mental model

An IndexedDB Object Store is the browser equivalent of a table in a SQL database or a collection in a MongoDB database. It's a container for your data records, which are JavaScript objects. A single database can contain multiple object stores, just as a traditional database can have multiple tables.

How it works

You create an object store using db.createObjectStore('storeName', options). This call is only valid inside an onupgradeneeded event handler, which fires when you open the database with a version number higher than its current one. The options object is crucial. You can specify a keyPath, which tells the store to use a property from your data objects as the unique key (e.g., { keyPath: 'id' }). This is an 'in-line key'. If you omit the keyPath, you must provide a separate key each time you add an object, which is an 'out-of-line key'. You can also set autoIncrement: true to have the database automatically generate integer keys for you.

When to use it

Use object stores when you need to persist structured client-side data that exceeds the 5-10MB limit of localStorage. It's perfect for building offline-capable applications, caching complex data from APIs to improve performance, or storing user-generated content like notes or drafts before they are sent to a server.

When not to use it

The API is asynchronous and event-based, making it more complex than localStorage. If you just need to store a user's theme preference or a simple token, IndexedDB is overkill. Stick to localStorage or sessionStorage for simple, small-scale string storage.

One canonical example

To create a 'tasks' store where each task object has a unique title, you would open the database with a new version. Inside the onupgradeneeded event, you'd call db.createObjectStore('tasks', { keyPath: 'taskTitle' });. Now, when you add an object like { taskTitle: 'Buy milk', status: 'pending' }, the store automatically uses 'Buy milk' as the key to identify and index that record. Trying to add another task with the same title would throw a ConstraintError.