How to Use LocalStorage in JavaScript

// Store data
localStorage.setItem("username", "Alice");
localStorage.setItem("theme", "dark");

// Retrieve data
const username = localStorage.getItem("username");
console.log(username); // "Alice"

// Store objects (must stringify)
const user = { name: "Bob", age: 30 };
localStorage.setItem("user", JSON.stringify(user));

// Retrieve objects (must parse)
const stored = JSON.parse(localStorage.getItem("user"));
console.log(stored.name); // "Bob"

// Remove item
localStorage.removeItem("theme");

// Clear all
localStorage.clear();

// Check if item exists
if (localStorage.getItem("username")) {
  console.log("User is logged in");
}

// Store arrays
const todos = ["Buy milk", "Walk dog", "Code"];
localStorage.setItem("todos", JSON.stringify(todos));
const retrieved = JSON.parse(localStorage.getItem("todos"));
console.log(retrieved[0]); // "Buy milk"

// Storage event (listen for changes)
window.addEventListener("storage", (e) => {
  console.log("Storage changed:", e.key, e.newValue);
});

// Practical example: Theme preference
function setTheme(theme) {
  localStorage.setItem("theme", theme);
  document.body.className = theme;
}

function loadTheme() {
  const theme = localStorage.getItem("theme") || "light";
  document.body.className = theme;
}

loadTheme();

// SessionStorage (same API, cleared on tab close)
sessionStorage.setItem("temp", "data");
const temp = sessionStorage.getItem("temp");