pmbanugo/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CookieStore API Demo - Theme Switcher</title>
    <style>
      body {
        font-family: system-ui, -apple-system, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 20px;
        transition: all 0.3s ease;
      }

      body.dark-theme {
        background-color: #1a1a1a;
        color: #ffffff;
      }

      .container {
        max-width: 800px;
        margin: 0 auto;
      }

      .theme-switcher {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        transition: all 0.3s ease;
      }

      .dark-theme .theme-switcher {
        background-color: #ffffff;
        color: #1a1a1a;
      }

      .cookie-info {
        margin-top: 20px;
        padding: 15px;
        border-radius: 5px;
        background-color: #f0f0f0;
      }

      .dark-theme .cookie-info {
        background-color: #2a2a2a;
      }

      #cookieDisplay {
        font-family: monospace;
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>CookieStore API Demo</h1>
      <button class="theme-switcher" onclick="toggleTheme()">
        Toggle Theme
      </button>

      <p>This demo shows how to use the modern CookieStore API to:</p>
      <ul>
        <li>Set cookies asynchronously</li>
        <li>Read cookies using promises</li>
        <li>Listen for cookie changes</li>
        <li>Persist user preferences</li>
      </ul>

      <div class="cookie-info">
        <h3>Current Cookie State:</h3>
        <div id="cookieDisplay"></div>
      </div>
    </div>

    <script>
      // Check if CookieStore API is supported
      if ("cookieStore" in window) {
        // Listen for cookie changes
        cookieStore.addEventListener("change", (event) => {
          console.log("Cookie change detected:", event);
          updateCookieDisplay();
        });
      } else {
        alert("CookieStore API is not supported in your browser");
      }

      // Initialize theme on page load
      async function initializeTheme() {
        try {
          const themeCookie = await cookieStore.get("theme");
          if (themeCookie && themeCookie.value === "dark") {
            document.body.classList.add("dark-theme");
          }
          updateCookieDisplay();
        } catch (error) {
          console.error("Error reading theme cookie:", error);
        }
      }

      // Toggle theme and save preference
      async function toggleTheme() {
        const isDarkTheme = document.body.classList.toggle("dark-theme");

        try {
          await cookieStore.set({
            name: "theme",
            value: isDarkTheme ? "dark" : "light",
            expires: Date.now() + 30 * 24 * 60 * 60 * 1000, // 30 days
            sameSite: "strict",
          });
        } catch (error) {
          console.error("Error saving theme preference:", error);
        }
      }

      // Display all cookies
      async function updateCookieDisplay() {
        const cookieDisplay = document.getElementById("cookieDisplay");
        try {
          const cookies = await cookieStore.getAll();
          cookieDisplay.textContent = JSON.stringify(cookies, null, 2);
        } catch (error) {
          console.error("Error getting cookies:", error);
          cookieDisplay.textContent = "Error fetching cookies";
        }
      }

      // Initialize the page
      initializeTheme();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>CookieStore API Demo - Theme Switcher</title>
	<style>
	body {
	font-family: system-ui, -apple-system, sans-serif;
	line-height: 1.6;
	margin: 0;
	padding: 20px;
	transition: all 0.3s ease;
	}

	body.dark-theme {
	background-color: #1a1a1a;
	color: #ffffff;
	}

	.container {
	max-width: 800px;
	margin: 0 auto;
	}

	.theme-switcher {
	position: fixed;
	top: 20px;
	right: 20px;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	transition: all 0.3s ease;
	}

	.dark-theme .theme-switcher {
	background-color: #ffffff;
	color: #1a1a1a;
	}

	.cookie-info {
	margin-top: 20px;
	padding: 15px;
	border-radius: 5px;
	background-color: #f0f0f0;
	}

	.dark-theme .cookie-info {
	background-color: #2a2a2a;
	}

	#cookieDisplay {
	font-family: monospace;
	white-space: pre-wrap;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>CookieStore API Demo</h1>
	<button class="theme-switcher" onclick="toggleTheme()">
	Toggle Theme
	</button>

	<p>This demo shows how to use the modern CookieStore API to:</p>
	<ul>
	<li>Set cookies asynchronously</li>
	<li>Read cookies using promises</li>
	<li>Listen for cookie changes</li>
	<li>Persist user preferences</li>
	</ul>

	<div class="cookie-info">
	<h3>Current Cookie State:</h3>
	<div id="cookieDisplay"></div>
	</div>
	</div>

	<script>
	// Check if CookieStore API is supported
	if ("cookieStore" in window) {
	// Listen for cookie changes
	cookieStore.addEventListener("change", (event) => {
	console.log("Cookie change detected:", event);
	updateCookieDisplay();
	});
	} else {
	alert("CookieStore API is not supported in your browser");
	}

	// Initialize theme on page load
	async function initializeTheme() {
	try {
	const themeCookie = await cookieStore.get("theme");
	if (themeCookie && themeCookie.value === "dark") {
	document.body.classList.add("dark-theme");
	}
	updateCookieDisplay();
	} catch (error) {
	console.error("Error reading theme cookie:", error);
	}
	}

	// Toggle theme and save preference
	async function toggleTheme() {
	const isDarkTheme = document.body.classList.toggle("dark-theme");

	try {
	await cookieStore.set({
	name: "theme",
	value: isDarkTheme ? "dark" : "light",
	expires: Date.now() + 30 * 24 * 60 * 60 * 1000, // 30 days
	sameSite: "strict",
	});
	} catch (error) {
	console.error("Error saving theme preference:", error);
	}
	}

	// Display all cookies
	async function updateCookieDisplay() {
	const cookieDisplay = document.getElementById("cookieDisplay");
	try {
	const cookies = await cookieStore.getAll();
	cookieDisplay.textContent = JSON.stringify(cookies, null, 2);
	} catch (error) {
	console.error("Error getting cookies:", error);
	cookieDisplay.textContent = "Error fetching cookies";
	}
	}

	// Initialize the page
	initializeTheme();
	</script>
	</body>
	</html>