JavaScript中的持久暗模式

我的网站上有一个切换暗模式的开关。当我打开另一个页面时，我希望它是持久的。这是我切换它的原始代码：

var checkbox = document.querySelector("input[name=theme]");

checkbox.addEventListener("change", function () {
  if (this.checked) {
    trans();
    document.documentElement.setAttribute("data-theme", "dark");
  } else {
    trans();
    document.documentElement.setAttribute("data-theme", "light");
  }
});

let trans = () => {
  document.documentElement.classList.add("transition");
  window.setTimeout(() => {
    document.documentElement.classList.remove("transition");
  }, 1000);
};

然而，我现在正试图使用本地存储使更改在其他网页上持久化，但这并没有发生。它甚至不再切换黑暗主题。我哪里做错了？我应该改变什么？我在网站上搜索过，但没有人真的像我这样做。我是JS新手，所以我想在选择另一个解决方案之前了解出了什么问题

任何帮助都将不胜感激

var checkbox = document.querySelector("input[name=theme]");

var theme;
if (localStorage.getItem("data-theme")) {
  theme = localStorage.getItem("data-theme");
  trans();
  document.documentElement.setAttribute("data-theme", theme);
} else {
  theme = "light";
  localStorage.setItem("data-theme", theme);
}
checkbox.addEventListener("change", function () {
  if (this.checked) {
    trans();
    document.documentElement.setAttribute("data-theme", "dark");
    theme = "dark";
    localStorage.setItem("data-theme", theme);
  } else {
    trans();
    document.documentElement.setAttribute("data-theme", "light");
    theme = "light";
    localStorage.setItem("data-theme", theme);
  }
});

let trans = () => {
  document.documentElement.classList.add("transition");
  window.setTimeout(() => {
    document.documentElement.classList.remove("transition");
  }, 1000);
};

---

我想下面的代码可以工作。在使用变量之前，您应该初始化

trans

变量

let trans = () => {
  document.documentElement.classList.add("transition");
  window.setTimeout(() => {
    document.documentElement.classList.remove("transition");
  }, 1000);
};

var checkbox = document.querySelector("input[name=theme]");

var theme;
if (localStorage.getItem("data-theme")) {
  theme = localStorage.getItem("data-theme");
  trans();
  document.documentElement.setAttribute("data-theme", theme);
} else {
  theme = "light";
  localStorage.setItem("data-theme", theme);
}
checkbox.addEventListener("change", function () {
  if (this.checked) {
    trans();
    document.documentElement.setAttribute("data-theme", "dark");
    theme = "dark";
    localStorage.setItem("data-theme", theme);
  } else {
    trans();
    document.documentElement.setAttribute("data-theme", "light");
    theme = "light";
    localStorage.setItem("data-theme", theme);
  }
});

---

localStorage根据网站的来源保存键/值对。

---

如果您的应用程序使用多个源，那么每次切换源时，您都必须管理键/值对。如果是这种情况，那么你应该考虑保存这个信息在你的后端。

< P>我已经在另一个网站上做了这个精确的事情。我在下面列出了一个简单的例子。下面的代码段没有将代码用于预期目的。请参阅本文底部的完整源代码

consttoggletheme=（）=>{
//主题切换按钮。
const-toggleSwitch=document.querySelector（'.theme-switch-input[type=“checkbox”]'）；
功能切换主题（e）{
让darkModeEnabled=e.target.checked；
document.documentElement.setAttribute（'data-theme'，已启用暗模式？'dark'：'light'）；
setItem（'theme'，darkModeEnabled？'dark'：'light'）；
}
toggleSwitch.addEventListener（'change'，switchTheme，false）；
//恢复主题状态。
const currentTheme=localStorage.getItem（'theme'）？localStorage.getItem（'theme'）：null；
如果（当前主题）{
document.documentElement.setAttribute（'data-theme'，currentTheme）；
如果（currentTheme==='dark'）{
toggleSwitch.checked=true；
}
}
}
切换主题（）
.as控制台包装{display:none！important；}
：根{
--前景色：#000；
--背景色：#FFF；
--链接颜色：#07D；
}
身体{
背景：var（--背景色）；
颜色：var（--前景色）；
}
a、 a:参观了{
颜色：var（--链接颜色）；
}
h1，导航{
文本对齐：居中；
}
导航{
显示器：flex；
弯曲方向：行；
对正内容：空间均匀；
填充：0.5em；
}
导航a{
文字装饰：无；
}
标题{
位置：相对位置；
}
标题输入[type=“checkbox”]{
位置：绝对位置；
右：1em；
}
/**黑暗主题*/
[数据主题=“黑暗”]{
--前景色：#EEE；
--背景色：#111；
--链接颜色：#5AF；
}

家
在使用css变量时，只需更改变量值即可


函数changecolour（）{
设c=document.getElementById（“pickbackground”）.value；
document.documentElement.style.setProperty（“--mystyle”，c）；
}
：根目录{
--我的风格：绿色；
}
跨度{
背景色：var（--mystyle）；
颜色：白色；
}
这是一些文本



绿色
蓝色
红色
如果所有页面都共享相同的协议、域和端口，则本地存储项应保持不变：如果执行
console.log（theme）
，则在执行
theme=localStorage.getItem（“数据主题”）
之后的第二个页面上，它是否显示值？是否检查了控制台的错误？如果使用此符号（
let trans=（）=>{…}
）定义tran，则顺序很重要。您可以将定义移到顶部或使用函数表示法（
function trans（）{…}
）@ATD yes确实如此。它显示为“暗”，但随后我还得到一个
未捕获引用错误：在初始化之前无法访问词法声明“trans”
在下面的“trans（）”行it@dnaconsole显示未捕获引用错误：在初始化之前无法访问词法声明“trans”，但如果我添加
console.log（主题），它将返回值
那么@carlo_webber124很可能是对的——这只是代码的顺序，也许是代码所在的位置（例如，头部或身体）我明白了。第一个是怎么工作的？就像在切换主题一样？这是我们完全看不到的一个功能块的一部分，或者它可能位于页面的中间的<代码>脚本<代码>标签中，一些元素在它上面和下面的其他元素上。在尚未执行的回调方法中。执行回调时，该函数已在内存中分配，因此不会引发错误。例如：
let someFunc=（）=>logSmth（）；let logSmth=（）=>console.log（'log it'）；someFunc（）
@ATD这是整个功能块。在关闭
body
标记之前，我已将脚本标记作为最后一个。我认为@Ahmet在您下面的评论就是原因。谢谢！这有助于我的理解