如何在暗模式切换中使用 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

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("数据主题")

如果它返回 null，那么可能有一些东西阻止了您的 cookie。尝试检查您的设置。

Answer 2

编辑：

将 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.setItem("data-theme", "dark");

}

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

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

->

我在 CodePen 中创建了您的代码示例，它似乎运行良好： https://codepen.io/Hkrie/pen/ZEXEReq

如果它仍然无法在您的计算机上运行，​​您可能已禁用 localStorage 或使用没有它的浏览器。 （一个可能的解决方法是改用 cookie -> https://www.w3schools.com/js/js_cookies.asp）