我们希望页面上有一个黑暗模式。我已经设法制作了一个暗模式滑块，但如果你刷新或转到下一页，我希望它保持在暗模式。
JS-
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
复选框
<div>
<input type="checkbox" class="checkbox" id="chk" onclick="myFunction()" />
<label class="label" for="chk">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<div class="ball"></div>
</label>
</div>
您可以在localStorage中保留一些用户首选项。如果你是新来的，你的目标是了解如何做到你所要求的，这就是做到这一点的方法之一
localStorage是一个简单的键->值存储，您可以在其中存储属于原点的数据，甚至可以跨浏览器会话存储。
所以，你可以做的是：
1.创建一个函数，将'colorMode'转换为localStorage，并根据该函数设置配色方案。
function colorModeSwitch () {
const mode = localStorage['colorMode']
document.body.classList.toggle('dark-mode', mode)
}
2.找到您的复选框，也根据'colorMode'属性进行设置。
const checkbox = document.querySelector('#chk')
checkbox.checked = localStorage['colorMode']
3.addEventListener到您的复选框，将该复选框的状态保存到localStorage，并通过调用p.1 中的函数来更改您的配色方案
checkbox.addEventListener('change', () => {
localStorage['colorMode'] = checkbox.checked || ""
colorModeSwitch()
})
完整示例：
<!DOCTYPE html>
<html>
<head>
<style>
.dark-mode {
background-color: #222222;
}
.contents {
color: #ffffff;
}
</style>
<title>0_0</title>
</head>
<body>
<input type="checkbox" class="checkbox" id="chk"/>
<label class="label" for="chk">Dark Mode Checkbox</label>
<div class="contents">Im in dark mode now!</div>
</body>
<script>
function colorModeSwitch () {
const mode = localStorage['colorMode']
document.body.classList.toggle('dark-mode', mode)
}
const checkbox = document.querySelector('#chk')
checkbox.checked = localStorage['colorMode']
checkbox.addEventListener('change', () => {
localStorage['colorMode'] = checkbox.checked || ""
colorModeSwitch()
})
colorModeSwitch()
</script>
</html>
您需要将用户的偏好存储在客户端中，并在JS代码中读取。
假设你的身体元素以光模式开始：
JS-
function myFunction(e) {
var element = document.body;
element.classList.toggle("dark-mode");
if (e.target.checked) {
localStorage.setItem('dark', 1)
} else {
localStorage.removeItem('dark')
}
}
window.addEventListener('DOMContentLoaded', function() {
const isDark = localStorage.getItem('dark')
if (isDark) {
document.body.classList.add('dark-mode')
}
}