如何解决使用JavaScript的HTML本地存储暗模式
我试图对我的网站设置完全暗模式。差不多完成了,但是我有一个问题。当我重新加载页面时,暗模式会恢复为默认的亮模式。我该如何解决这个问题?我尝试了一些代码,但是没有用。我想使用本地存储,但是我不知道如何将其添加到我的代码中。有人可以帮我弄这个吗? 这是我的示例代码:
function darkmode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
<html>
<head>
<style>
.card {
background-color: red;
color: green;
}
.dark-mode .card {
background-color: black;
color: white;
}
</style>
</head>
<body>
<button onclick="darkmode()">DARK MODE</button>
<div class="card">
<h2>Title</h2>
<div class="fkimg" style="height: 100px; width: 20%;">IMAGE</div>
<a>Some text</a>
</div>
</body>
</html>
解决方法
对于您的示例代码,似乎最好的方法是在darkmode
函数中添加一些内容:
function darkmode() {
// all values retrieved from localStorage will be strings
const wasDarkmode = localStorage.getItem('darkmode') === 'true';
localStorage.setItem('darkmode',!wasDarkmode);
const element = document.body;
element.classList.toggle('dark-mode',!wasDarkmode);
}
function onload() {
document.body.classList.toggle('dark-mode',localStorage.getItem('darkmode') === 'true');
}
<html>
<head>...</head>
<body onload="onload()">
...
</body>
</html>
MDN localStorage参考:https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。