What's the difference between localStorage and sessionStorage

Nour

10/24/2025

Tags:programmingjavascriptweb-developmentbrowser-apisfrontend

What's the difference between localStorage and sessionStorage

Both localStorage and sessionStorage are web storage objects that allow you to store key-value pairs in a web browser. However, they have some key differences:

1. Scope and Lifetime

• localStorage: Data stored in localStorage has no expiration time. It persists even after the browser is closed and reopened. The data remains until it is explicitly deleted by the user or through code.
• sessionStorage: Data stored in sessionStorage is limited to the duration of the page session. It is cleared when the page session ends, which typically occurs when the browser tab or window is closed.

2. Accessibility Across Tabs and Windows

• localStorage: Data is shared across all tabs and windows from the same origin (same protocol, domain, and port). If you store data in one tab, it's accessible in another tab from the same website.
• sessionStorage: Data is isolated to the specific tab or window where it was created. Opening the same page in a new tab creates a completely separate sessionStorage instance.

3. Storage Capacity

Both localStorage and sessionStorage typically have the same storage limit:

• Most browsers allow around 5-10 MB of storage per origin
• The exact limit can vary between browsers
• Both are significantly larger than cookies (which are limited to ~4KB)

4. Use Cases

localStorage is ideal for:

• User preferences and settings
• Shopping cart data
• Form data that should persist across sessions
• Caching data to reduce server requests
• Storing authentication tokens (with proper security considerations)

sessionStorage is ideal for:

• Temporary form data within a single session
• Multi-step forms where data shouldn't persist after closing the tab
• Storing sensitive information that should be cleared automatically
• Temporary UI state that's specific to one browsing session

5. Code Examples

Both APIs use the same methods:

// Storing data
localStorage.setItem("username", "Max");
sessionStorage.setItem("sessionId", "12345");
 
// Retrieving data
const username = localStorage.getItem("username");
const sessionId = sessionStorage.getItem("sessionId");
 
// Removing specific item
localStorage.removeItem("username");
sessionStorage.removeItem("sessionId");
 
// Clearing all data
localStorage.clear();
sessionStorage.clear();
 
// Storing objects (must stringify)
const user = { name: "Max", role: "developer" };
localStorage.setItem("user", JSON.stringify(user));
 
// Retrieving objects (must parse)
const storedUser = JSON.parse(localStorage.getItem("user"));

6. Security Considerations

• Both storage mechanisms are vulnerable to XSS attacks - any JavaScript code running on your page can access them
• Never store sensitive information like passwords, credit card numbers, or API keys
• Data is stored in plain text and is not encrypted
• Consider using httpOnly cookies for sensitive authentication tokens instead

7. Browser Support

Both localStorage and sessionStorage are widely supported in all modern browsers:

• Chrome, Firefox, Safari, Edge, and Opera all have full support
• Internet Explorer 8+ supports both (though IE8 has some quirks)
• Mobile browsers also have good support

Conclusion

Choose localStorage when you need data to persist across browser sessions and be accessible from multiple tabs. Choose sessionStorage when you need temporary storage that's isolated to a single tab and should be automatically cleared when the user closes it.

Both are powerful tools in a developer's toolkit, and understanding their differences helps you make the right choice for your specific use case.