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 ๐
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)
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.
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.
