localStorage vs sessionStorage – What’s the Difference and When to Use What?

When building web applications, storing data in the browser can come in really handy. Two of the most common tools for this are localStorage and sessionStorage, but what's the difference between them?

If you're just starting with frontend development, this is something you'll come across pretty quickly. So let's break it down in a beginner-friendly way.

🧠 What Are They?

Both localStorage and sessionStorage are part of the Web Storage API, which allows you to store key-value pairs in the browser. Unlike cookies, they don’t get sent with every HTTP request and can store more data (typically around 5MB).

They are super useful for:

• Saving user preferences

• Caching data

• Persisting simple UI state (e.g. dark mode)

🧩 The Key Differences

💡 Real-Life Examples

1. Using localStorage

// Save theme preference
localStorage.setItem("theme", "dark");

// Get it back later
const theme = localStorage.getItem("theme");

// Delete value from localStorage
localStorage.removeItem("theme");

✅ Use when you want to remember settings even after a user comes back days later.

---

2. Using sessionStorage

// Store temporary checkout step
sessionStorage.setItem("currentStep", "payment");

// Retrieve it
const step = sessionStorage.getItem("currentStep");

// Delete value from sessionStorage
sessionStorage.removeItem("currentStep");

✅ Use when the data is only relevant to the current tab or session.

---

⚠️ A Few Things to Keep in Mind

• Both are synchronous – meaning large amounts of data can slow your app.

• They only support strings – you’ll need JSON.stringify() and JSON.parse() for objects.

• They are not secure – don’t store sensitive data like passwords or access tokens.

---

🎯 When to Use What

🧩 TL;DR

• localStorage = Stays forever (unless cleared), shared across tabs.

• sessionStorage = Lives only while the tab is open.

Choose based on how long you want the data to persist and where you need access to it.

---

✍️ Wrapping Up

Hope this helped you understand the difference between these two storage options in the browser! If you're just getting into frontend development, mastering browser storage is a small step that makes a big difference.