DEV Community

keshav Sandhu
keshav Sandhu

Posted on

πŸ†š LocalStorage vs SessionStorage: When to Use What & How?

Both localStorage and sessionStorage are part of the Web Storage API and allow you to store data in the browser. However, they have key differences in lifespan and scope.


πŸ” Key Differences

Feature localStorage 🏠 sessionStorage πŸ•’
Lifespan Persists indefinitely (until manually deleted) Expires when the tab is closed
Scope Shared across all tabs & windows of the same origin Only available in the tab where it was created
Storage Limit ~5MB per domain ~5MB per domain
Availability Even after closing/reopening the browser Cleared when the tab is closed

πŸ“Œ When to Use What?

βœ… Use localStorage when you need data to persist

  • Store user settings, authentication tokens, or preferences.
  • Example: Saving a user's theme preference (light or dark).

βœ… Use sessionStorage for temporary data

  • Useful for tab-specific session handling.
  • Example: Storing form progress that should reset when the user closes the tab.

πŸ“Œ How to Use localStorage

πŸ”Ή Set Data

localStorage.setItem("theme", "dark");
Enter fullscreen mode Exit fullscreen mode

πŸ”Ή Get Data

const theme = localStorage.getItem("theme");
console.log(theme); // "dark"
Enter fullscreen mode Exit fullscreen mode

πŸ”Ή Remove Data

localStorage.removeItem("theme");
Enter fullscreen mode Exit fullscreen mode

πŸ”Ή Clear Everything

localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

πŸ“Œ How to Use sessionStorage

Works just like localStorage, but only persists until the tab is closed.

πŸ”Ή Set Data

sessionStorage.setItem("sessionID", "12345");
Enter fullscreen mode Exit fullscreen mode

πŸ”Ή Get Data

const sessionID = sessionStorage.getItem("sessionID");
console.log(sessionID); // "12345"
Enter fullscreen mode Exit fullscreen mode

πŸ”Ή Remove Data

sessionStorage.removeItem("sessionID");
Enter fullscreen mode Exit fullscreen mode

πŸ”Ή Clear Everything

sessionStorage.clear();
Enter fullscreen mode Exit fullscreen mode

🎯 Quick Recap

Use Case Best Storage Option
Remember user preferences (e.g., theme, language) localStorage
Store authentication tokens (if no security concerns) localStorage
Track form progress (until tab closes) sessionStorage
Save temporary shopping cart items (only for a session) sessionStorage

πŸ’‘ Tip: Don't store sensitive data (e.g., passwords, API keys) in either storage, as they are accessible via JavaScript. Use HTTP-only cookies for that.


Now you know when and how to use localStorage and sessionStorage! πŸš€ Let me know if you have any questions. 😊

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityβ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple β€œthank you” goes a long wayβ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay