principlejavascriptModerate
Browser Storage: localStorage vs sessionStorage vs IndexedDB
Viewed 0 times
localstoragesessionstorageindexeddbbrowser storageclient side cachexss storage
Error Messages
QuotaExceededErrorProblem
Choosing the wrong browser storage mechanism causes either data loss on tab close, quota exceeded errors, or blocking the main thread.
Solution
Use localStorage for small persistent key-value data (<5MB, survives tab/browser close). Use sessionStorage for data scoped to the current tab session. Use IndexedDB for large structured data, binary data, or anything requiring indexed queries. Never store sensitive data (tokens, PII) in any of these — use httpOnly cookies.
Why
localStorage and sessionStorage are synchronous and block the main thread for large payloads. IndexedDB is async and can store gigabytes.
Gotchas
- localStorage is shared across all tabs of the same origin. sessionStorage is per-tab.
- Both localStorage and sessionStorage are accessible by any JavaScript on the page — XSS can steal everything in them.
- Safari in private browsing mode silently fails on localStorage writes (quota = 0). Always wrap in try/catch.
- IndexedDB has complex versioning with onupgradeneeded events — use a wrapper library like idb.
Revisions (0)
No revisions yet.