如何在 HTML/JavaScript 中保存暗/亮模式状态[重复]答案

【问题标题】：How to save dark/light mode state in HTML/JavaScript [duplicate]如何在 HTML/JavaScript 中保存暗/亮模式状态[重复]
【发布时间】：2023-01-06 00:04:20
【问题描述】：

即使我关闭并重新访问该页面，是否有任何方法可以在 html 中保存暗/亮模式状态。我正在尝试使用 localStorage 来完成它，但我无法让它工作。这是我的代码：

function DLMode() { //This is the button function
  var element = document.body;
  element.classList.toggle("dark-mode");
  if (!darkMode) {
    document.getElementById("dl_mode").src = "images/light.jpg";
    document.documentElement.style.setProperty('--default-white', "rgb(0, 0, 0)");
    document.documentElement.style.setProperty('--default-body', "rgb(48, 48, 48)");
    document.documentElement.style.setProperty('--default-shadow', "rgba(255, 255, 255, 9)");
    darkMode = true;
  } else {
    document.getElementById("dl_mode").src = "images/night.jpg";
    document.documentElement.style.setProperty('--default-body', "rgba(201, 201, 201, .4)");
    document.documentElement.style.setProperty('--default-white', "rgb(255, 255, 255)");
    document.documentElement.style.setProperty('--default-shadow', "rgba(0, 0, 0, .4)");
    darkMode = false;
  }
  localStorage.setItem("LDMode", darkMode);
}

function OnLoad_DL() { //This is page on load function
  var element = document.body;
  element.classList.toggle("dark-mode");
  if (localStorage.getItem("LDMode")) {
    document.getElementById("dl_mode").src = "images/night.jpg";
    document.documentElement.style.setProperty('--default-body', "rgba(201, 201, 201, .4)");
    document.documentElement.style.setProperty('--default-white', "rgb(255, 255, 255)");
    document.documentElement.style.setProperty('--default-shadow', "rgba(0, 0, 0, .4)");
    darkMode = false;
  } else {
    document.getElementById("dl_mode").src = "images/light.jpg";
    document.documentElement.style.setProperty('--default-white', "rgb(0, 0, 0)");
    document.documentElement.style.setProperty('--default-body', "rgb(48, 48, 48)");
    document.documentElement.style.setProperty('--default-shadow', "rgba(255, 255, 255, 9)");
    darkMode = true;
  }
}

【问题讨论】：

使用在一定时间后过期的浏览器 cookie 或仅限 http 的 cookie
你只是测试if (localStorage.getItem("LDMode"))不是null。您没有在变量中读取或使用它的值。
jsfiddle.net/epxko04d

标签： javascript html

【解决方案1】：

问题是数据类型之一......

localstorage 只存储字符串。

当您将 TRUE 保存到本地存储时，它会转换为字符串表达式 "true"。

在您的“if”语句中，您只是询问值“LDMode”是否具有作为字符串的值（“true”或“false”）。它永远是真的。

像这样设置本地存储：localStorage.setItem("LDMode", true) 将导致此 console.log(localStorage.getItem("LDMode")); 返回 "true"

您可以简单地检查存储项的值是否等于字符串表达式 "true"，如下所示：

let ldmode = localStorage.getItem("LDMode") === "true";

【讨论】：