将暗模式复选框切换保存到本地存储

在我的网站上，我有一个复选框，可以在默认的浅色主题和深色主题之间切换。如果页面设置为暗模式并刷新，则主题将切换回亮模式。有没有办法保存访问者的决定，使页面在刷新时保持在暗模式？这是我目前拥有的代码：

const chk = document.getElementById('chk');
chk.addEventListener('change', () => {
document.body.classList.toggle('dark');
});

body {
background: #f5f5f5;
color: #353535;
}
body.dark {
background-color: #1a1a1a;
color: #f5f5f5;
}

<div class="toggle">
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
</div>
<h1>website text</h1>

我意识到这可能是一个简单的答案，但我是网络开发的新手，我自己也在努力寻找答案。提前感谢你的帮助。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #f5f5f5;
color: #353535;
text-align:right;
}
body.dark {
background-color: #1a1a1a;
color: #f5f5f5;
}
</style>
<title>Dark mode to Local Storage</title>
</head>
<body>
<div class="toggle">
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">Turn On Dark Mode</label>
</div>
<h1>Website Content</h1>

<script>
const chk = document.getElementById('chk');
chk.addEventListener('click', () => {
chk.checked?document.body.classList.add("dark"):document.body.classList.remove("dark");
localStorage.setItem('darkModeStatus', chk.checked);
});
window.addEventListener('load', (event) => {
if(localStorage.getItem('darkModeStatus')=="true"){
document.body.classList.add("dark"); 
document.getElementById('chk').checked = true;
}
});
</script>        
</body>
</html>

localStorage和sessionStorage属性允许在web浏览器中保存key/value对。

localStorage对象存储的数据没有过期日期。当浏览器关闭时，数据将不会被删除，并将在第二天、第二周或第二年可用。

要存储值，请选中要存储在本地存储器中的复选框。无论何时打开页面，都要检查值存储是否正确。

在你的案例中，你尝试了这个。。。。

StackOverflow代码段注释存储localStorage，因此将此代码复制到您的文件中

const toggleSwitch = document.querySelector('input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);

if (currentTheme === 'dark') {
toggleSwitch.checked = true;
document.body.classList.toggle('dark');
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
document.body.classList.toggle('dark');
}
else {        document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
document.body.classList.toggle('dark');
}    
}
toggleSwitch.addEventListener('change', switchTheme, false);

body {
background: #f5f5f5;
color: #353535;
}
body.dark {
background-color: #1a1a1a;
color: #f5f5f5;
}

<div class="toggle">
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
</div>
<h1>website text</h1>

这里有一个非常简单的例子。使用localStorage.setItem()将值存储在本地存储器中。您可以使用任何方法从输入中检索数据。这里我只是使用一个表格。

function toggleDarkMode() {
const formElem = document.getElementById('dark-mode');
const formData = new FormData(formElem);
const darkModeState = !!formData.get('toggler');
localStorage.setItem('darkMode', darkModeState);
}

<form id="dark-mode">
<input type="checkbox" name="toggler"> Use darkmode
<br/>
<button type="button" onClick="toggleDarkMode()">Save</button>
</form>

首先定义一个变量，并将本地存储定义为其值(最好在设置值之前检查本地存储(如下：

let DarkMode = localStorage.getItem('DarkMode');
if(DarkMode == null) {
localStorage.setItem('DarkMode', 'false');
}

然后在用户选中该框时使其为真并在本地存储中更新

let DarkMode = localStorage.getItem('DarkMode');
if(DarkMode == null) {
localStorage.setItem('DarkMode', 'false');
}
const chk = document.getElementById('chk');
chk.addEventListener('change', () => {
document.body.classList.toggle('dark');
if (DarkMode == false) {
DarkMode = true;
localStorage.setItem('DarkMode' , true)
console.log(DarkMode);
} else {
DarkMode = false;
localStorage.setItem('DarkMode' , false)
console.log(DarkMode);
}
});

body {
background: #f5f5f5;
color: #353535;
}
body.dark {
background-color: #1a1a1a;
color: #f5f5f5;
}

<div class="toggle">
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
</div>
<h1>website text</h1>

让darkMode=false；

如果用户选中，则将变量更改为true然后在本地存储中设置变量。

即

LocalStorage.setItem('darkTheme'，true(；

然后使用localStorage.getItem(darkTheme'(获取变量

相关内容

最新更新

热门标签：