HTML Local Storage and Session Storage

# HTML Local Storage and Session Storage

1. Introduction #

2. Learning Objectives #

• Differentiate between localStorage and sessionStorage.

• Save, read, and delete data using the Storage API.

• Use storage to save user preferences.

3. Detailed Explanations #

Local Storage vs Session Storage #

• localStorage: Data is saved *forever* (until the user manually clears their browser cache). Good for dark-mode preferences or high scores.

• sessionStorage: Data is saved only for the current session. If the user closes the browser tab, the data is deleted. Good for sensitive forms.

Saving Data #

// Save data to localStorage
localStorage.setItem("username", "JaneDoe");

// Save data to sessionStorage
sessionStorage.setItem("draft_email", "Hello, I wanted to say...");

Reading Data #

// Get data
let user = localStorage.getItem("username");
console.log(user); // Outputs: "JaneDoe"

Removing Data #

// Remove one item
localStorage.removeItem("username");

// Clear EVERYTHING
localStorage.clear();

4. Mini Project: Dark Mode Saver #

<style>
  body.dark-mode { background-color: #121212; color: white; }
</style>

<button onclick="toggleTheme()">Toggle Dark Mode</button>

<script>
  // When the page loads, check if the user previously chose dark mode
  if (localStorage.getItem("theme") === "dark") {
      document.body.classList.add("dark-mode");
  }

  function toggleTheme() {
      // Toggle the class
      document.body.classList.toggle("dark-mode");
      
      // Save the new preference
      if (document.body.classList.contains("dark-mode")) {
          localStorage.setItem("theme", "dark");
      } else {
          localStorage.setItem("theme", "light");
      }
  }
</script>

5. MCQs #

6. Summary #