javascript - 如何为暗/亮模式切换保存 cookie？

Question

我正在使用 W3Scholls Dark Mode Toggle对于我的网站，它运行良好。
但就在我刷新页面后，会显示默认 View ，即日间模式。
这是Webpage Test Page.
如何设置 cookie，以便如果用户选择暗模式，则页面默认以暗模式打开？
另外，如何将其应用于整个网站，以便用户每次打开页面时都无需按下按钮。

Answer 1

您可以使用 localStorage为了这。

// On page load set the theme.
(function() {
  let onpageLoad = localStorage.getItem("theme") || "";
  let element = document.body;
  element.classList.add(onpageLoad);
  document.getElementById("theme").textContent =
    localStorage.getItem("theme") || "light";
})();

function themeToggle() {
  let element = document.body;
  element.classList.toggle("dark-mode");

  let theme = localStorage.getItem("theme");
  if (theme && theme === "dark-mode") {
    localStorage.setItem("theme", "");
  } else {
    localStorage.setItem("theme", "dark-mode");
  }

  document.getElementById("theme").textContent = localStorage.getItem("theme");
}

HTML:

<button type="button" onclick="themeToggle()">Theme Toggle</button>
<div id="theme"></div>