Web Dev Day 16: LocalStorage vs SessionStorage

📅 Date: April 23, 2026

🧠 Mood: The Data Hoarder 🗄️

🔥 Topic: Web Dev Day 16: LocalStorage vs SessionStorage

😤 The Page Refresh Tragedy

Picture this: You are sitting on the train, filling out a massive, multi-page university form on your phone. The network drops just as you hit submit. The browser throws an error, you swipe down to refresh the page, and boom—every single text box is completely empty. You have to start all over again. The frustration is enough to make you want to throw your phone out the window.

As developers, we know that JavaScript variables are incredibly fragile. The moment a user hits the refresh button, or navigates away from the page, all the data held in JS variables is instantly destroyed. The slate is wiped clean. Today, I learned how to fix this terrible user experience by tapping into the browser's secret database: Web Storage.

---

🗄️ The 5MB Safe in Your Browser

Modern browsers give every website a tiny, isolated database (around 5MB) to store data directly on the user's device. It operates using simple Key-Value pairs (like a dictionary). There are two main types of storage, and choosing the wrong one can break your application.

1. LocalStorage (The Permanent Tattoo)

Data saved in localStorage does not expire. If you save a user's "Dark Mode" preference here, they can close the tab, shut down their laptop, and come back three months later—the website will still remember they prefer Dark Mode. It only goes away if the developer writes code to delete it, or the user manually clears their browser cache.

2. SessionStorage (The Sticky Note)

Data saved in sessionStorage is temporary. It survives page refreshes, but the absolute second the user closes the browser tab, the data is incinerated. This is perfect for sensitive data or temporary states, like a multi-step checkout form where you don't want old data lingering if they abandon the cart and come back tomorrow.

---

💻 Practical: Saving Theme Preferences

Back in Day 10, I built a Dark Mode toggle button. But it was flawed because it reset to Light Mode every time I refreshed the page. Today, I upgraded it using LocalStorage so it remembers the user's choice permanently. Here is the exact syntax:

// The 3 Core Commands of Web Storage:
// 1. setItem(key, value)
// 2. getItem(key)
// 3. removeItem(key)

// Example: Saving Dark Mode State

// When the page loads, check if they already have a saved preference
const savedTheme = localStorage.getItem("themePref");

if (savedTheme === "dark") {
    document.body.classList.add("dark-mode");
}

// When the user clicks the toggle button
toggleBtn.addEventListener('click', () => {
    document.body.classList.toggle("dark-mode");
    
    // Check the current state and save it to LocalStorage
    if (document.body.classList.contains("dark-mode")) {
        localStorage.setItem("themePref", "dark");
    } else {
        localStorage.setItem("themePref", "light");
    }
});

The one major limitation? Web Storage can only save Strings. If you want to save a complex JavaScript array or object (like a shopping cart), you must convert it to a string first using JSON.stringify(), and convert it back using JSON.parse() when you retrieve it.

---

🎯 The Final Piece of Vanilla JS

With the DOM, Events, Async/Await, and Web Storage under my belt, I have finally collected all the infinity stones of Vanilla JavaScript. I can now build a fully functional frontend. Tomorrow, the game changes. It is time to leave the raw code behind and step into the world of modern frameworks. Tomorrow, we install React.