使用JavaScript的HTML本地存储暗模式

我试图为我的网站制作一个完整的暗码。差不多完成了，但我有个问题。当我重新加载页面时，暗模式回到默认的亮模式。我怎样才能解决这个问题？我尝试了一些代码，但没有成功。我想使用本地存储，但我不知道如何将其添加到代码中。有人能帮我吗？ 以下是我的示例代码：

函数darkmode（）{
var元素=document.body；
element.classList.toggle（“暗模式”）；
}

.卡片{
背景色：红色；
颜色：绿色；
}
.暗模式.卡{
背景色：黑色；
颜色：白色；
}
暗模式
标题
形象
一些文本

对于示例代码，最好的方法似乎是在

暗模式

函数中添加一些内容：

函数darkmode（）{
//从localStorage检索到的所有值都将是字符串
const wasDarkmode=localStorage.getItem（'darkmode'）='true'；
setItem（'darkmode'，！wasDarkmode）；
const元素=document.body；
element.classList.toggle（'dark-mode'，！wasDarkmode）；
}
函数onload（）{
document.body.classList.toggle（'dark-mode'，localStorage.getItem（'darkmode'）='true'）；
}

...
...

---

MDN localStorage引用：

它不工作。当我切换黑暗模式，然后重新加载页面时，它会返回到光明主题。之后，我重新加载页面并将其返回到灯光模式，如果我单击按钮，第一次单击它的DoNothing。然后我第二次点击这个按钮，它改变了主题。因此，我看到代码已更改，但仍然不是可以帮助我的代码：（这里有一个gif来看看我的问题是什么：@scrummy:Ah，当然，我忘了设置页面的初始值。我编辑了答案以包含一个

onload

函数，看看这是否适用于你。）。