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

Posted 2023-02-18

【中文标题】如何在暗模式切换中使用 localStorage？

【英文标题】：How can i use localStorage in a dark mode toggle?

【发布时间】：2022-01-04 03:10:05

【问题描述】：

我正在使用以下 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");
  

【问题讨论】：

localStorage.toggled() 应该会抛出错误，除非您自己添加了这样的方法。您的开发工具控制台中有任何错误吗？为什么在一种情况下使用toggled() 而在另一种情况下使用正确的setItem()？

我已经解决了这个问题，我已经尝试了这两个选项，toggled() 和 setItem() 并且在任何情况下都不会保存“data-theme”的值。并且控制台不会抛出任何错误。

【参考方案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。尝试检查您的设置。

【讨论】：

Muchisimas gracias funciona perfectamente :D

【参考方案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）

【讨论】：

没有localStorage.set()。你从哪里得到的？

@charkuetfk 错字

我已经解决了这个问题，我已经尝试了这两个选项，toggled() 和 setItem() 并且在任何情况下都不会保存“data-theme”的值。并且控制台不会抛出任何错误。

@JulenSanchez 似乎工作正常：codepen.io/Hkrie/pen/ZEXEReq

@Hkrie 是的，按钮工作正常，本地存储不起作用，当我浏览网络链接时，它不会保存首选项。