Let me break down the differences between localStorage
, sessionStorage
, and cookies
, along with examples:
Table of Contents
1. localStorage
- Definition:
localStorage
is a web storage API that allows you to store data in the user’s browser persistently, even after the browser window is closed. It stores data with no expiration time. - Storage Limit: Typically around 5MB.
- Scope: Data is available to all tabs/windows on the same origin (same domain), and it persists until explicitly removed.
Example:
// Set an item localStorage.setItem('username', 'john_doe'); // Get an item let username = localStorage.getItem('username'); console.log(username); // Output: john_doe // Remove an item localStorage.removeItem('username'); // Clear all items localStorage.clear();
Use case: Ideal for saving data that should persist across sessions, like user preferences or themes, as long as the user does not clear their browser’s data.
2. sessionStorage
- Definition:
sessionStorage
is also part of the web storage API, but unlikelocalStorage
, the data is only available for the duration of the page session. This means it will persist as long as the tab or window is open. Once the tab or window is closed, the data is cleared. - Storage Limit: Typically around 5MB.
- Scope: Data is only available to the specific tab/window in which it was stored. It does not persist across tabs or windows.
Example:
// Set an item sessionStorage.setItem('cart', JSON.stringify({ items: 3 })); // Get an item let cart = sessionStorage.getItem('cart'); console.log(cart); // Output: {"items":3} // Remove an item sessionStorage.removeItem('cart'); // Clear all items sessionStorage.clear();
Use case: Useful for temporary data that only needs to persist during a single session, like tracking items in a shopping cart while the user is still on the same page or session.
3. Cookies
- Definition: Cookies are small pieces of data sent to the browser by the server and stored in the browser. They can also be set client-side via JavaScript. Cookies can have an expiration date and are sent with every HTTP request to the server.
- Storage Limit: Typically around 4KB.
- Scope: Cookies are sent with every HTTP request, so they’re available to both the client-side JavaScript and the server, which is useful for server-side authentication, tracking, and session management.
Example:
// Set a cookie document.cookie = "username=john_doe; expires=Thu, 1 Jan 2026 12:00:00 UTC; path=/"; // Get cookies (note: all cookies are returned as a string) let cookies = document.cookie; console.log(cookies); // Output: "username=john_doe" // Delete a cookie by setting its expiration date in the past document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
Use case: Often used for user authentication, tracking user sessions across different pages or requests, or saving user preferences that should persist even after the browser is closed (if expiration is set).
Key Differences:
- Lifetime:
localStorage
: Data persists until explicitly deleted.sessionStorage
: Data is deleted when the tab or window is closed.Cookies
: Data persists based on expiration date, or until manually deleted.
- Storage Size:
localStorage
andsessionStorage
: Typically 5MB.- Cookies: Around 4KB.
- Scope:
localStorage
: Shared across all tabs/windows for the same origin.sessionStorage
: Limited to the specific tab/window.Cookies
: Sent with every HTTP request, so accessible by both client and server.
When to use each?
- Use
localStorage
when you need to store data that should persist across browser sessions (like user settings or preferences). - Use
sessionStorage
when you need to store temporary data specific to a single session (like tracking a cart during a checkout process). - Use
cookies
when you need to store small bits of data that need to be sent with every request, like authentication tokens or session identifiers.