JavaScript LocalStorage vs SessionStorage

LocalStorage and SessionStorage are part of the Web Storage API, allowing developers to store key/value pairs in the browser. Unlike cookies, they don't expire with each request and are much easier to use.

1. What is LocalStorage?

Data is stored in the browser with no expiration time.

Stays even after page reload or browser restart.

Useful for storing user preferences, themes, tokens, etc.

Syntax:

localStorage.setItem('key', 'value');      // Save data
const data = localStorage.getItem('key');  // Read data
localStorage.removeItem('key');            // Delete specific key
localStorage.clear();                      // Clear all keys

Example:

localStorage.setItem('username', 'JohnDoe');

console.log(localStorage.getItem('username')); // Output: JohnDoe

localStorage.removeItem('username');

2. What is SessionStorage?

Data is stored per session (until the browser/tab is closed).

Useful for temporary data like form input, tab-specific info, or temp tokens.

Syntax:

sessionStorage.setItem('key', 'value');        // Save data
const data = sessionStorage.getItem('key');    // Read data
sessionStorage.removeItem('key');              // Delete key
sessionStorage.clear();                        // Clear all

Example:

sessionStorage.setItem('cartItems', '3');
console.log(sessionStorage.getItem('cartItems')); // Output: 3

3. Key Differences: LocalStorage vs SessionStorage

4. Real-World Use Cases

LocalStorage:

• Save theme (dark/light)
• Store auth tokens
• User settings/preferences

SessionStorage:

• Keep form progress until submission
• Store current page state
• Temporary filters/selections

5. Note on Data Types

All data is stored as strings. You can use JSON.stringify() and JSON.parse() for storing/retrieving objects or arrays.

Example with objects:

const user = { name: "Alice", age: 25 };

// Save object
localStorage.setItem("user", JSON.stringify(user));

// Retrieve object
const data = JSON.parse(localStorage.getItem("user"));
console.log(data.name);  // Output: Alice