How can create user preferences in JavaScript by storing the choice when the user clicks something, and then reloading it whenever the page is opened again

You can create user preferences in JavaScript by storing the choice when the user clicks something, and then reloading it whenever the page is opened again. The usual way is to use localStorage or cookies.

Here’s a step-by-step example:

---

Example: Save User Theme Preference (Dark/Light Mode)

HTML

<button id="themeToggle">Toggle Theme</button>
<p>Hello! This text will change theme.</p>

JavaScript

// Get saved preference (if any)
let userPref = localStorage.getItem("theme");
 document.cookie = "theme=light; path=/";

// Apply saved preference
if (userPref === "dark") {
  document.body.classList.add("dark");
  document.cookie = "theme=dark; path=/";
}

// Button click event
document.getElementById("themeToggle").addEventListener("click", () => {
  document.body.classList.toggle("dark");

  // Save user preference
  if (document.body.classList.contains("dark")) {
    localStorage.setItem("theme", "dark");
 document.cookie = "theme=dark; path=/";
  } else {
    localStorage.setItem("theme", "light");
 document.cookie = "theme=light; path=/";
  }
});

CSS

body {
  background: white;
  color: black;
}
body.dark {
  background: black;
  color: white;
}

---

How It Works

1. When the user clicks the button → we toggle a CSS class.
2. Save the preference in localStorage.
3. Next time the user reloads, we restore the preference from localStorage.