Browser

Approx Quota (Typical Desktop)

Notes

Chrome/Edge

~6% of available disk space

Can exceed 1GB if space allows

Firefox

2GB–10GB (depending on platform)

Generous, especially on desktop

Safari

50MB–1GB+ (but more conservative)

Often limits per-origin storage

Mobile Browsers

Lower (often 50–200MB)

Depends heavily on free space and usage patterns

Programming

2 min read

IndexedDB vs. localStorage: The Best Way to Store Large Data in the Browser

Learn why IndexedDB is the superior choice for handling large data like images in your web app, and how it beats the limitations of localStorage.

Share via

Posted by

TThức Trần

Posted on

Updated on

🗂️ Why I’m Using IndexedDB Instead of localStorage🗂️ Why I’m Using IndexedDB Instead of localStorage

While working on a feature that caches image data for the user's last searches, I ran into a limitation: localStorage caps out at around 5MB (and only stores strings). Not ideal when you're dealing with images or structured data.

That’s when I turned to IndexedDB — the browser’s built-in, asynchronous, low-level NoSQL database.

👏 Shoutout

Big thanks to my teammate Stefanos, who works primarily on the backend, but randomly dropped this IndexedDB gem in a chat. Turns out, it's exactly what I needed on the frontend. Love when cross-discipline knowledge sharing saves the day 🙌

🧠 What is IndexedDB?🧠 What is IndexedDB?

IndexedDB is a client-side storage API that lets you store large amounts of structured data, including files like images and blobs. Unlike localStorage, it's:

✅ Asynchronous (non-blocking, so it won’t freeze your UI)
✅ Object-based (you can store entire JS objects, not just strings)
✅ Persistent (data sticks around even after refreshes or reboots)
✅ Indexed (you can search/filter efficiently)

💡 Why I Needed It💡 Why I Needed It

In my app, users can search content that includes image previews. I wanted to:

Store their last few searches
Cache image data so the previews load instantly if they search again soon

Using localStorage worked at first — until I hit the size limit and got a QuotaExceededError. Not fun.

IndexedDB, on the other hand, gives me hundreds of MBs (depending on the browser) and lets me store image blobs alongside metadata in a structured way.

💾 How Much Storage Does IndexedDB Support?💾 How Much Storage Does IndexedDB Support?

There’s no hard-fixed limit, but here’s what most modern browsers do:

🧠 General Rules🧠 General Rules

You can usually use hundreds of MB — sometimes even over 1GB.
You won’t get a quota upfront — browsers often allocate storage dynamically as your app uses it.
For persistent storage (e.g. PWAs with StorageManager.persist()), browsers are more generous.

📊 Estimated Limits by Browser📊 Estimated Limits by Browser

Browser	Approx Quota (Typical Desktop)	Notes
Chrome/Edge	~6% of available disk space	Can exceed 1GB if space allows
Firefox	2GB–10GB (depending on platform)	Generous, especially on desktop
Safari	50MB–1GB+ (but more conservative)	Often limits per-origin storage
Mobile Browsers	Lower (often 50–200MB)	Depends heavily on free space and usage patterns

📌 User Prompt📌 User Prompt

If your app uses too much, browsers may prompt the user or throw quota errors, especially on mobile.

📁 Quick Tip: Check Your Usage📁 Quick Tip: Check Your Usage

In DevTools:

Chrome: DevTools → Application tab → IndexedDB
You can also use navigator.storage.estimate() to programmatically check:


navigator.storage.estimate().then(({ usage, quota }) => {
  console.log(`Using ${usage} of ${quota} bytes.`);
});

Check IndexedDB storage capacity

🔍 Common Use Cases (Besides Mine)🔍 Common Use Cases (Besides Mine)

Here’s how others typically use IndexedDB:

🔁 Offline-first web apps (e.g. to-do lists, note apps, PWAs)
🎯 Caching API responses or static assets
📁 Storing large or complex user data (like form drafts, saved articles)
🎮 Games (saving progress, storing assets)
🔐 Encrypted or privacy-focused apps (keep data local-only)

⚙️ Quick Tip for Devs⚙️ Quick Tip for Devs

You can use IndexedDB directly via the native API, but it’s verbose. If you want a smoother DX, check out libraries like:

idb
Dexie.js

🧪 Final Thought🧪 Final Thought

If you're hitting the ceiling with localStorage, or you need to cache binary data like images — IndexedDB is your best friend. It takes a little getting used to, but it's incredibly powerful for building fast, offline-capable experiences.

This blog is powered by my kind mate - ChatGPT!

a robot holding a gun next to a pile of rolls of toilet paper — Photo by Gerard Siderius on Unsplash

Comments (0)

Share via

Posted by

TThức Trần

Posted on

Updated on