Think of your browser as a small personal warehouse where you can store different types of items. Normally, when you visit a website, everything you see disappears once you close the browser tab. But what if you want your data to stay even when you close the browser—like your game progress, saved notes, or offline data for an app? That’s where IndexedDB comes in.

What is IndexedDB?

IndexedDB is like a super-organized storage system inside your browser. Unlike cookies or localStorage, which can only store small amounts of text, IndexedDB can store a LOT of data—even entire files or images—structured like a database. It’s like having your own mini database inside the browser that works offline and can store complex data.

Why do we need it?

Imagine you’re playing an online game, but your internet goes off. Without IndexedDB, all your progress would vanish. With IndexedDB, the game can store your scores, character data, and inventory locally, so when you reconnect, everything is still there. It’s also useful for apps like note-taking apps, music apps, or even e-commerce carts when offline.

How does IndexedDB work?

  1. Create/Open a Database You first open a database by giving it a name (e.g., "MyGameDB"). If it doesn’t exist, the browser creates it for you.

  2. Create an Object Store Think of this like creating a folder inside your warehouse to store related items, like a “Players” folder or a “Scores” folder.

  3. Add Data You add objects (like JavaScript objects) to these folders. IndexedDB stores data as key-value pairs, where the key is like an ID and the value is the actual data.

  4. Retrieve Data You can search and get data back using the key, or even query by indexes.

  5. Transactions When you do operations like adding or reading data, you do it inside something called a transaction—think of it as a safe way to ensure everything is done correctly.

Is IndexedDB available everywhere?

Most modern browsers support it. But we usually check before using it with:

if (!window.indexedDB) {
    console.log("Your browser doesn't support IndexedDB.");
}

IndexedDB vs localStorage

  • localStorage → simple key-value, small data, only strings.
  • IndexedDB → big data, structured, can store objects and files.

In Short

IndexedDB is your browser’s personal hard drive for structured data. It’s powerful, works offline, and lets you store large, complex data in a way that’s super-efficient.

Review Questions

  1. IndexedDB is a type of __________ storage in the browser that stores large amounts of data.
  2. Unlike localStorage, IndexedDB can store complex __________ like objects and files.
  3. The first step in using IndexedDB is to __________ a database.
  4. Inside a database, we create __________ stores to organize related data.
  5. IndexedDB uses __________ to safely perform add, update, or read operations.
  6. Data in IndexedDB is stored as __________ pairs.
  7. To check if a browser supports IndexedDB, we check the __________ object.
  8. IndexedDB is useful for apps that need to work __________ when there is no internet.
  9. __________ is a smaller storage system that can only store simple key-value text data, unlike IndexedDB.
  10. IndexedDB is often used to save things like game progress, offline notes, and __________.
<
Previous Post
🌍 Javascript Geolocation: Learning Geolocation in JavaScript
>
Next Post
JavaScript Modularization: Divide and Conquer for Code