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

Question

我正在为我的网站使用W3Scholls Dark Mode Toggle ，它运行良好。

但就在我刷新页面后，会显示默认视图，即日间模式。

这是网页测试页。

如何设置 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>