LocalStorage vs sessionStorage vs Cookies in JavaScript: Key Differences

In JavaScript, localStorage stores data with no expiration, surviving browser restarts, while sessionStorage stores data only for the current browser tab session. Cookies store small data sent with every HTTP request and can have expiration dates, making them suitable for server communication and session management.

Quick Comparison

Here is a quick table comparing localStorage, sessionStorage, and cookies on key factors:

Feature	localStorage	sessionStorage	Cookies
Storage Size	About 5-10 MB	About 5-10 MB	Around 4 KB
Data Lifespan	No expiration, persists until cleared	Cleared when tab/window closes	Expires based on set date or session
Scope	Accessible across all tabs/windows from same origin	Accessible only in the current tab/window	Sent with every HTTP request to the server
Sent to Server	No	No	Yes
Use Case	Store long-term data like user preferences	Store temporary data for a session	Manage sessions, authentication, and server communication

Key Differences

localStorage and sessionStorage are both part of the Web Storage API and store data as key-value pairs on the client side. The main difference is lifespan: localStorage data stays until explicitly deleted, even if the browser closes, while sessionStorage data is cleared when the browser tab or window closes.

Cookies are older and smaller storage units that are sent with every HTTP request to the server, making them useful for server-side session management and authentication. Cookies have size limits around 4 KB and can have expiration dates set by the server or client.

Unlike localStorage and sessionStorage, cookies are accessible both on the client and server side, but they add overhead to every request. Web Storage APIs are faster and better for storing larger amounts of data that do not need to be sent to the server.

Code Comparison

Here is how you store, retrieve, and remove data using localStorage:

javascript

localStorage.setItem('username', 'Alice');
const user = localStorage.getItem('username');
console.log(user); // Output: Alice
localStorage.removeItem('username');

Output

Alice

sessionStorage Equivalent

The same operations using sessionStorage look like this:

javascript

sessionStorage.setItem('username', 'Alice');
const user = sessionStorage.getItem('username');
console.log(user); // Output: Alice
sessionStorage.removeItem('username');

Output

Alice

When to Use Which

Choose localStorage when you need to save data that should persist across browser sessions, like user preferences or theme settings.

Choose sessionStorage for data that should only last while the user has the tab or window open, such as temporary form data or one-time session info.

Choose cookies when you need to send data to the server with each request, like authentication tokens or session IDs, or when you need to set expiration dates and control server access.

Key Takeaways

localStorage keeps data until cleared and works across tabs from the same origin.

sessionStorage stores data only for the current tab session and clears on close.

Cookies are small, sent with every HTTP request, and useful for server communication.

Use localStorage for long-term client data, sessionStorage for temporary session data, and cookies for server-related data.

Web Storage APIs offer more space and speed but do not communicate with the server automatically.