What should I use instead of localStorage for large data?

IndexedDB for structured data (hundreds of MB). Cache API for network responses. Origin Private File System for file-like access.

How do I calculate current localStorage usage?

In console: Object.entries(localStorage).reduce((t,[k,v]) => t + k.length + v.length, 0) gives approximate byte usage.

Browser localStorage Quota Exceeded — Storage Limit & Alternatives

Warningweb development

Overview

Fix 'QuotaExceededError: Failed to execute setItem on Storage' when localStorage exceeds its 5-10MB limit, with strategies for larger client-side storage.

Key Details

localStorage has a fixed limit of approximately 5MB per origin (varies by browser)
The limit is per origin (protocol + domain + port), shared across all tabs
localStorage stores strings only — objects must be JSON.stringify'd, increasing size
The 5MB limit counts characters, but multi-byte characters (Unicode) can reduce effective capacity
sessionStorage has the same limit but is per-tab and cleared when the tab closes

Common Causes

Storing too much data: accumulated cache, logs, or application state exceeding 5MB
Repeatedly writing without cleaning up old entries
Base64-encoded files (images, documents) consuming large amounts of space
Multiple features in the same app competing for the shared storage space
JSON serialization overhead increasing data size beyond original

Steps

1Check current usage: calculate total size of all localStorage items in DevTools Console
2Clean up old data: implement TTL (time-to-live) for cached items
3Switch to IndexedDB for larger storage needs (hundreds of MB available)
4Compress data before storing: use LZ-string or similar compression library
5Use Cache API for storing network responses and static assets