IndexedDB Object Stores: Your Browser's NoSQL Table
An IndexedDB Object Store is like a NoSQL table in your browser, holding JavaScript objects by key. Use it for offline data like to-do lists or cached API responses. The main footgun: you can only create stores during a database version upgrade.
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.
Interview question
Under what specific condition can an IndexedDB Object Store be created or modified?
- a.At any point, as long as the database transaction is active.
- b.Only during an onupgradeneeded event when the database version is incremented.Correct
- c.Immediately before the first data object is added to the store.
- d.When the database connection is successfully established and open.
Why? this is the answer
Object stores can only be created or modified within an onupgradeneeded event handler, which is triggered when the database is opened with a higher version number. Other database operations, like adding data, occur after the store structure is defined.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #indexeddb
- #web apis
- #storage
- #javascript
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles