Beyond localStorage: Understanding IndexedDB in Modern Browsers

Most web developers are familiar with localStorage, but there's a more powerful storage solution built into modern browsers: IndexedDB. Let's explore why it matters and how it's different.

The Storage Landscape in Modern Browsers

Open your browser's developer tools, and you'll find several storage options:

localStorage
SessionStorage
CacheStorage
IndexedDB
Cookies

While localStorage is the go-to solution for many frontend developers, IndexedDB offers capabilities that make it worth understanding.

Take Linear, the project management software, as an example. They use IndexedDB to cache data on the client side. When users refresh their page, Linear first checks if the cached data is current before making server requests. This simple approach significantly reduces server load.

Why Not Just Use localStorage?

The key differences are between localStorage and IndexedDB are the following:

Data Format

localStorage: Only stores strings (usually requiring JSON.stringify)
IndexedDB: Handles almost any JavaScript object type

Storage Capacity

localStorage: Limited storage (usually 5-10MB)
IndexedDB: Designed for larger datasets

Performance

localStorage: Synchronous (blocks the main thread)
IndexedDB: Asynchronous (doesn't freeze your app)

Data Integrity

IndexedDB offers transactional operations: changes either completely succeed or completely fail

Let's dive deeper into why IndexedDB is superior for handling large datasets. Imagine you're building a web app that needs to store 50MB of user data locally. With localStorage, you'd immediately face two problems: First, you'd hit the storage limit (typically 5-10MB). Second, and perhaps more critically, every time you read or write data, your app would freeze momentarily. This happens because localStorage operations are synchronous – they block JavaScript's main thread until completion.

IndexedDB solves both issues elegantly. Not only can it handle much larger datasets (often limited only by available disk space), but its asynchronous nature means your app stays responsive even when processing large amounts of data. When you save or retrieve data, the operation happens in the background, allowing users to continue interacting with your app seamlessly. This is particularly important for modern web applications that might need to cache images, videos, or large JSON datasets for offline use.

Practical Applications

IndexedDB shines in scenarios requiring:

Offline data access
Large dataset handling
Complex data structures

For instance, TanStack Query uses IndexedDB through its persistQueryClient feature to enable offline caching, improving the user experience when network connectivity is poor.

While you can use IndexedDB directly (Google's web.dev has excellent documentation), most developers prefer using wrapper libraries. localForage is a popular choice that provides a localStorage-like API while leveraging IndexedDB's power under the hood.

The Bottom Line

Think of IndexedDB as localStorage's more capable cousin. While it might seem more complex at first, its ability to handle larger datasets, work offline, and maintain data integrity makes it invaluable for modern web applications.