DEV Community

keshav Sandhu
keshav Sandhu

Posted on

1 1 1 1

πŸ†š 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. 😊

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

πŸ‘₯ Ideal for solo developers, teams, and cross-company projects

Learn more

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay