在 2 个样式表之间切换并使用本地存储保持用户偏好

Question

我有两个图像（月亮和太阳）和两个不同的样式表，用于深色和浅色页面主题。 暗模式是默认设置。 要更改为光照模式，请单击太阳的图像。

我能够在样式表之间切换。 但是，我不知道如何存储选择的主题。 我希望用户能够保持他们的风格偏好，即使在刷新页面或更改页面（在同一网站上）之后。

我在下面放了一些我的代码示例。 我希望有人可以帮助我理解本地存储。

相关html

    <link href="normalize.css" rel="stylesheet" type="text/css">
    <link id="theme" rel="stylesheet" type="text/css" href="styles-dark.css" />
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap" rel="stylesheet">
    <link class="favicon" rel="icon" href="./favicon.ico" />  
  </head>
 
  <body>
 
    <header id="flex-box-header">
      <h1 id="nameHeading">MY NAME</h1>
      <!-- 'Dark Mode' will be the default --> 
      <div class="toggle">
        <div class="tooltip">
          <img class="displayButton" id="dark" src="moon - light.png" alt="dark mode" width="90.82px" height="76px">
          <span class="tooltiptext" id="textDark">Dark Mode</span>
        </div>
        <div class="tooltip">
          <img class="displayButton" id="light" src="sun.jpg" alt="light mode" width="83.56px" height="62.02px">
          <span class="tooltiptext" id="textLight">Light Mode</span>
        </div>
      </div>
    </header>

这个 JavaScript 可以在主题之间切换，但是如何使用本地存储保存用户首选项？

// Button selection
const buttonLight = document.getElementById("light");
const buttonDark = document.getElementById("dark");

// Style selection
const lightStyle = "styles-light.css";
const darkStyle = "styles-dark.css";

// Select the stylesheet <link>
const theme = document.querySelector(".theme-link");

// Listen for a click on the sun button (buttonLight)
buttonLight.addEventListener("click", function() {
    theme.href = lightStyle;
    // different sun for light theme
    document.getElementById("light").src = "sun - light.png";
    document.querySelector(".favicon").href = "favicon-light.ico";
  });

// Listen for a click on the moon button (buttonDark)
buttonDark.addEventListener("click", function() {
    theme.href = darkStyle;
    // different sun for dark theme
    document.getElementById("light").src="sun.jpg";
    document.querySelector(".favicon").href = "favicon.ico";
  });

JavaScript - 尝试使用本地存储并失败

function toggle(theme) {
    var styleSheet = document.getElementById("theme");
    if (theme != styleSheet.href) styleSheet.href = theme;
    document.getElementById("light").src.onClick = styleSheet.href === "styles-light.css";
  }
  window.addEventListener("click", function() {
    var theme = localStorage.getItem("theme") || document.getElementById("theme").href;
    toggle(theme);
    document.getElementById("light").addEventListener("click", function() {
      var theme = this.onClick ? "styles-light.css" : "styles-dark.css"
      toggle(theme);  
      localStorage.setItem("theme", theme);
    })
  })

Answer 1

我终于弄明白了。 它有 FOIT（不正确主题的 Flash），但我只是松了一口气，用户偏好正在保存。 我将在另一天努力消除 FOIT。

JavaScript

// Button selection
const buttonLight = document.getElementById("light");
const buttonDark = document.getElementById("dark");

// Style selection
const lightStyle = "styles-light.css";
const darkStyle = "styles-dark.css";

// Select the stylesheet <link>
const theme = document.getElementById("theme");

function lightFunction() {
  theme.href = lightStyle;
  // different sun for dark theme
  document.getElementById("light").src="sun - light.png";
  document.querySelector(".favicon").href = "favicon-light.ico";
  window.localStorage.setItem('theme', 'light');
}

function darkFunction() {
  theme.href = darkStyle;
  // different sun for dark theme
  document.getElementById("light").src="sun.jpg";
  document.querySelector(".favicon").href = "favicon.ico";
  window.localStorage.setItem('theme', 'dark');
}

// Listen for a click on the sun button (buttonLight)
buttonLight.addEventListener("click", lightFunction);

// Listen for a click on the moon button (buttonDark)
buttonDark.addEventListener("click", darkFunction);

const currentTheme = localStorage.getItem("theme");

if (currentTheme == "dark") {
  darkFunction();
} else {
  lightFunction();
}