如何在暗模式切换中使用 localStorage？

Question

我正在使用以下 javascript 代码通过 CSS 主题在暗模式和亮模式之间切换，并且效果很好，但是当我添加 local.storage 时，浏览器不会保存模式首选项。 我该怎么做？

HTML：

<button id="darkmode" type="button" onclick="toggleDark()">
<span id="night" class="material-icons">mode_night </span>
<span id="light" class="material-icons">light_mode</span>
</button>

CSS：

[data-theme="light"] {
--main-color: #dfdad8;
--sec-color: #202527;
--third-color: #6e6e65;
--one--color: #acf2be4d;
--two--color: #fdb8c052;
}

[data-theme="dark"] {
 --main-color: #6e6e65;
 --sec-color: #f5f5f5;
 --third-color: #202527;
 --one--color: #acf2bd;
 --two--color: #fdb8c0;
}

Javascript：

function toggleDark() {
  const container = document.body;
  const dataTheme = container.getAttribute("data-theme");
  let theme = localStorage.getItem("data-theme");

if (dataTheme === "light") {
  container.setAttribute("data-theme", "dark");
  document.getElementById("night").style.display = "block";
  document.getElementById("light").style.display = "none";
  localStorage.toggled("data-theme", "dark");

} else {

  container.setAttribute("data-theme", "light");
  document.getElementById("night").style.display = "none";
  document.getElementById("light").style.display = "block";
  localStorage.setItem("data-theme", "light");
  }
}

Answer 1

将 localStorage.toggled 更改为 localStorage.set

if (dataTheme === "light") {
  container.setAttribute("data-theme", "dark");
  document.getElementById("night").style.display = "block";
  document.getElementById("light").style.display = "none";
  localStorage.set("data-theme", "dark");

}

无论如何，您可能需要先检查 localStorage 是否存在以及您的“数据主题”是否存在。 如果“数据主题”不存在，您应该设置一个默认值。

if (localStorage.getItem("data-theme") === null) {
  //set default
}

Answer 2

2个问题：

- 您的代码忽略了保存的值。

-localStorage.toggled 不是一个东西

const container = document.body;
if(localStorage.getItem("data-theme")){
container.setAttribute("data-theme",localStorage.getItem("data-theme")); 
toggleDark(1)
} 
//actually use the saved value

function toggleDark(r) {//this function is executed when switching from the current theme to the other
    const dataTheme = container.getAttribute("data-theme");
    let theme_switch;
    if(dataTheme === "light") {theme_switch = 1} else {theme_switch = 0}
    if(r){theme_switch = !theme_switch}//so the oppisite of the theme stored is used when calling this function 
if (theme_switch) {
  container.setAttribute("data-theme", "dark");
  document.getElementById("night").style.display = "block";
  document.getElementById("light").style.display = "none";
  localStorage.setItem("data-theme", "dark");
} else {
  container.setAttribute("data-theme", "light");
  document.getElementById("night").style.display = "none";
  document.getElementById("light").style.display = "block";
  localStorage.setItem("data-theme", "light");
  }
}

如果上面的代码不起作用，请尝试以下步骤。

打开控制台并执行：localStorage.setItem("data-theme", "dark");

然后刷新页面并执行：localStorage.getItem("data-theme")

如果它返回 null 则可能有东西阻塞了您的 cookies。 尝试检查您的设置。