🗂️ LocalStorage vs SessionStorage

Both localStorage and sessionStorage are part of the Web Storage API, allowing you to store key-value pairs in a user's browser. They differ in lifespan and scope.

📦 LocalStorage

• Persists even after the browser is closed
• Shared across all tabs and windows of the same origin
• Useful for long-term storage like user preferences

🕒 SessionStorage

• Cleared when the page session ends (i.e., tab is closed)
• Scoped to the specific tab or window
• Useful for temporary data like form inputs or session state

🔧 Syntax Examples

// Set item
localStorage.setItem("username", "Shiv");
sessionStorage.setItem("token", "abc123");

// Get item
const user = localStorage.getItem("username");
const token = sessionStorage.getItem("token");

// Remove item
localStorage.removeItem("username");
sessionStorage.removeItem("token");

// Clear all
localStorage.clear();
sessionStorage.clear();

🗂️ LocalStorage & SessionStorage in JavaScript

In JavaScript, localStorage and sessionStorage are two mechanisms that allow websites to store key-value pairs in a web browser. They are part of the Web Storage API, which provides a more secure, larger-capacity, and more flexible alternative to cookies for client-side data storage.

🔍 Key Differences

The main difference between them lies in the duration and scope of the stored data.

📦 localStorage

• Duration: Data stored in localStorage has no expiration date and persists even when the browser is closed and reopened. The data is cleared only if a user manually clears the browser cache or if it's explicitly deleted by JavaScript.
• Scope: Data is accessible across all windows and tabs from the same origin (same protocol, hostname, and port).
• Use case: Suitable for long-term storage of data like user preferences (e.g., dark mode settings), language preferences, or caching data that doesn't need frequent updates.

🕒 sessionStorage

• Duration: Data is stored only for the duration of a single page session. It remains after a page refresh but is automatically cleared when the browser tab or window is closed.
• Scope: Data is restricted to the specific tab or window in which it was created. Even if the same website is opened in a new tab, the sessionStorage is unique to that new tab.
• Use case: Ideal for storing temporary data related to a user's current session, such as form data across a multi-step form, items in a shopping cart, or other data that should not persist beyond the user's current interaction.

🛠️ Common Methods

• setItem(key, value): Stores a key-value pair.
• Note: Both key and value are stored as strings. Objects and arrays must be serialized with JSON.stringify() before storing.
• getItem(key): Retrieves the value associated with a given key.
• removeItem(key): Deletes a specific key-value pair.
• clear(): Deletes all key-value pairs for the current origin.

💡 Example

// LocalStorage Example
localStorage.setItem('username', 'Alice');
const storedUsername = localStorage.getItem('username');
console.log(storedUsername); // Output: Alice

// SessionStorage Example
sessionStorage.setItem('tempData', 'This will be deleted when the tab closes');
const sessionData = sessionStorage.getItem('tempData');
console.log(sessionData); // Output: This will be deleted when the tab closes

// Store and retrieve an object
const userProfile = { name: 'Bob', theme: 'dark' };
localStorage.setItem('userProfile', JSON.stringify(userProfile));

const retrievedProfile = JSON.parse(localStorage.getItem('userProfile'));
console.log(retrievedProfile.theme); // Output: dark

✅ Advantages

• Larger Capacity: Both can store up to 5–10MB of data, significantly more than the 4KB limit of cookies.
• Efficient: Unlike cookies, data is not sent with every HTTP request, reducing network traffic and improving performance.
• Simple API: The methods for storing and retrieving data are straightforward and easy to use.

⚠️ Disadvantages

• Security Vulnerability: Data is not encrypted by default and is vulnerable to Cross-Site Scripting (XSS) attacks, as it is accessible by any JavaScript code on the same domain.
• Synchronous Operations: The API is synchronous, meaning it can block the main thread if used to store or retrieve very large amounts of data.
• Limited Scope: Data cannot be shared across different origins (domains, protocols, or ports) due to the Same-Origin Policy.
• Persistence: For localStorage, a lack of built-in expiration means data can accumulate if not managed properly.

📌 When to Use

Use Case	Recommended Storage
User preferences (e.g., dark mode, language)	localStorage
Form data recovery (e.g., in a multi-page form)	sessionStorage
Session-based shopping cart	sessionStorage
Caching application data (e.g., API responses)	localStorage
Sensitive data (e.g., authentication tokens)	Neither. Use secure server-side storage (e.g., HTTP-only cookies).

🧠 Best Practices and Precautions

• Never store sensitive data: Do not store private information, passwords, or authentication tokens in localStorage or sessionStorage.
• Handle non-string data: Always use JSON.stringify() to save complex data types and JSON.parse() to retrieve them.
• Perform error handling: Implement a try...catch block when setting data, as storage limits can sometimes be exceeded, resulting in an error.
• Clear data on logout: For authentication-related data stored in the browser for convenience (though not recommended), ensure it is cleared on user logout.
• Use sessionStorage first: If you only need data for the current user session, prefer sessionStorage. This prevents unnecessary data persistence and accumulation.

📊 Comparison Table

Feature	LocalStorage	SessionStorage
Persistence	Until manually cleared	Until tab/window is closed
Scope	All tabs/windows of same origin	Single tab/window
Storage Limit	~5MB	~5MB
Access	JavaScript only	JavaScript only
Use Case	Preferences, themes, login state	Form data, temporary session info

✅ Best Practices

• Always check for browser support using if (window.localStorage)
• Don't store sensitive data (e.g., passwords or tokens)
• Use JSON.stringify and JSON.parse for storing objects
• Clear unused data to avoid clutter

⚠️ Limitations

• Data is stored as strings only
• No built-in expiration or encryption
• Not suitable for large or sensitive data