Lesson 10: LocalStorage, SessionStorage & Client Persistence

Web Storage allows client applications to store key-value string data directly in the browser:

localStorage: Persists permanently across sessions until cleared (localStorage.setItem('key', val)).

sessionStorage: Persists only for the duration of the active browser tab.

Saving Objects: Must serialize with JSON.stringify() before storing and JSON.parse() upon retrieval.

⊞HTML5 Web Code (index.html)

<!DOCTYPE html>

<head>

<title>LocalStorage Persistence</title>

</head>

<h2>Persistent Preference Storage</h2>

Toggle & Save Dark Theme

</button>

const btn = document.getElementById("save-theme-btn");

const status = document.getElementById("storage-status");

// Check existing stored setting

const savedTheme = localStorage.getItem("app_theme") || "dark";

status.textContent = "Current Saved Theme: " + savedTheme;

btn.addEventListener("click", () => {

const current = localStorage.getItem("app_theme") === "light" ? "dark" : "light";

localStorage.setItem("app_theme", current);

status.textContent = "Current Saved Theme: " + current + " (Saved to LocalStorage!)";

});

</script>

</body>

</html>