我有两个主题:“黑暗”和“浅色”,我希望单击复选框时可以更改主题。
这是我更改主题的方式:
document.documentElement.setAttribute('data-theme', 'dark');
现在,这正在工作。但我希望将此更改保存在本地存储中,因此即使重新加载页面后,主题也可以保持不变。
这是我的代码:
checkBox.addEventListener('change', function () {
if(this.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem( 'data-theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('data-theme', 'light');
}
})
我犯了一个错误还是有我不明白的地方?
可以这样尝试:
var checkBox = document.getElementById('cb');
var theme = window.localStorage.getItem('data-theme');
if(theme) document.documentElement.setAttribute('data-theme', theme);
checkBox.checked = theme == 'dark' ? true : false;
checkBox.addEventListener('change', function () {
if(this.checked){
document.documentElement.setAttribute('data-theme', 'dark');
window.localStorage.setItem('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
window.localStorage.setItem('data-theme', 'light');
}
});
<input id="cb" type="checkbox" />
<label for="cb">Checkbox</label>