HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Display preferences</title>
</head>
<body>
  <h1>Cookie reader</h1>
  <p id="welcome"></p>
  <p id="theme"></p>
  <button type="button" id="run">Load preferences</button>
  <script>
    function getCookie(name) {
      var pairs = document.cookie.split(";");
      for (var i = 0; i < pairs.length; i++) {
        var trimmed = pairs[i].trim();
        var eq = trimmed.indexOf("=");
        if (eq === -1) continue;
        if (trimmed.slice(0, eq) === name) {
          try {
            return decodeURIComponent(trimmed.slice(eq + 1));
          } catch (e) {
            return trimmed.slice(eq + 1);
          }
        }
      }
      return null;
    }

    document.getElementById("run").addEventListener("click", function () {
      document.cookie = "username=JohnDoe; path=/";
      document.cookie = "theme=dark; path=/";
      var username = getCookie("username") || "Guest";
      var theme = getCookie("theme") || "light";
      document.getElementById("welcome").textContent = "Welcome, " + username + "!";
      document.getElementById("theme").textContent = "Theme: " + theme;
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript Cookies Read — display preferences (Try It)