In modern web development, storing data in the browser is essential for building fast and responsive applications. Browsers provide multiple storage options — localStorage, sessionStorage, cookies, and IndexedDB — each designed for different purposes and with distinct behaviours.
From saving user preferences across sessions to managing complex offline data, understanding these choices helps developers pick the right tool for the right job.
This guide walks you through how each storage method works, its strengths, differences, and best practices to use them securely and effectively.'
Web Storage API: localStorage & sessionStorage
The Web Storage API offers two main options for storing key-value pairs in the browser:
- localStorage: Saves data with no expiration. This means the data stays even if the browser is closed or the device restarts. Useful for preferences or data that should persist long-term.
- sessionStorage: Data only lasts for the current tab or browser session. Once the tab is closed, the stored data disappears. Perfect for temporary info like form data or step-by-step wizards.
Example of localStorage:
Cookies: How They Work & When to Use Them
Cookies have been the traditional method of storing small bits of data that are sent back to the server with every request. They can have attributes like:
- expiry: When they should expire
- path & domain: Limit scope to URLs/domains
- secure: Sent only on HTTPS
- HttpOnly: Accessible only by the server, not JavaScript (important for security)
Example of setting a cookie:
Cookies are essential for authentication and tracking, but limited in size (~4KB) and sent automatically with requests, which can slow things down.
IndexedDB: Storing Structured Data Efficiently
IndexedDB is a low-level database API inside browsers designed for large amounts of structured data. Unlike localStorage or sessionStorage, it is asynchronous, doesn’t block the UI, and supports complex objects and indexes.
At its core, IndexedDB uses:
- Databases: Containers of data
- Object Stores: Like tables in SQL, where records are stored
- Transactions: To manage read/write access safely
It’s ideal for apps needing offline support or storing a lot of data, like media-heavy or client-side apps.
Performance & Storage Limits
- localStorage/sessionStorage usually offers about 5MB of storage per origin.
- Cookies are limited to about 4KB each.
- IndexedDB provides much more space, often hundreds of MBs, depending on the browser.
Security: Avoiding XSS Risks
- Avoid storing sensitive data in localStorage or cookies accessible via JavaScript to prevent cross-site scripting (XSS) attacks.
- Use HttpOnly cookies for authentication tokens to ensure they’re inaccessible to JavaScript.
- Properly sanitise input and headers to protect your app.
Best Practices for Using localStorage & sessionStorage
- Store only non-sensitive, simple data.
- Use JSON to serialise complex objects (JSON.stringify() / JSON.parse()).
- Always wrap storage access in try/catch to handle quota exceeded errors gracefully.
- Clean up data when no longer needed.
- Use sessionStorage for strictly session-bound data, and localStorage for persistent info.