Javascript 更改主题并将其存储在本地存储器中

我有两个主题“暗”和“光”，我希望在单击复选框时更改主题

这就是我改变主题的方式：

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（主题）document.documentElement.setAttribute（'data-theme'，theme）；
checkBox.checked=主题=='dark'？真：假；
复选框.addEventListener（'change'，function（）{
如果（选中此项）{
document.documentElement.setAttribute（'data-theme'，'dark'）；
window.localStorage.setItem（'data-theme'，'dark'）；
}否则{
document.documentElement.setAttribute（'data-theme'，'light'）；
window.localStorage.setItem（'data-theme'，'light'）；
}
});

复选框可以这样尝试：


var checkBox=document.getElementById（'cb'）；
var-theme=window.localStorage.getItem（'data-theme'）；
if（主题）document.documentElement.setAttribute（'data-theme'，theme）；
checkBox.checked=主题=='dark'？真：假；
复选框.addEventListener（'change'，function（）{
如果（选中此项）{
document.documentElement.setAttribute（'data-theme'，'dark'）；
window.localStorage.setItem（'data-theme'，'dark'）；
}否则{
document.documentElement.setAttribute（'data-theme'，'light'）；
window.localStorage.setItem（'data-theme'，'light'）；
}
});

复选框
关于这些解决方案，您需要一些步骤：


从localStroge获取上一个设置值
获取checkbox元素
根据先前的本地存储值有条件地设置复选框如果未设置，则默认为false

最后设置和取消设置逻辑


var dragTheme=window.localStorage.getItem（'dark-theme'）//获取私有设置值
var themeCheckBox=document.getElementById（'themeCheck'）；//获取checkbox元素
themeCheckBox.checked=（dragTheme=“true”）？真：假；//根据私有设置值有条件地设置复选框如果未设置，则默认为false
函数myFunction（）{//更改复选框值时触发
如果（复选框已选中）{
document.documentElement.setAttribute（'dark-theme'，'dark'）；
window.localStorage.setItem（'dark-theme'，true）；
}否则{
document.documentElement.setAttribute（'dark-theme'，'light'）；
window.localStorage.setItem（'dark-theme'，false）；
}
}

单调主题
关于这些解决方案，您需要一些步骤：


从localStroge获取上一个设置值
获取checkbox元素
根据先前的本地存储值有条件地设置复选框如果未设置，则默认为false

最后设置和取消设置逻辑


var dragTheme=window.localStorage.getItem（'dark-theme'）//获取私有设置值
var themeCheckBox=document.getElementById（'themeCheck'）；//获取checkbox元素
themeCheckBox.checked=（dragTheme=“true”）？真：假；//根据私有设置值有条件地设置复选框如果未设置，则默认为false
函数myFunction（）{//更改复选框值时触发
如果（复选框已选中）{
document.documentElement.setAttribute（'dark-theme'，'dark'）；
window.localStorage.setItem（'dark-theme'，true）；
}否则{
document.documentElement.setAttribute（'dark-theme'，'light'）；
window.localStorage.setItem（'dark-theme'，false）；
}
}

单调主题
好了，歹徒，这就是我们要做的：

将此.js文件添加到项目中：

导出类管理员{
"严格使用",；
/**
*构造类TheManager的对象
*@param{string}themeToggle-单击后更改网站主题的元素
*@param{string}theme-light表示初始主题灯，反之亦然表示暗主题灯
*/
构造函数（主题切换，主题='light'）{
//获取主题切换DOM节点
如果（！themeToggle）{
错误（`必须将有效的DOM元素作为themeToggle传递。您传递了${themeToggle}`）；
返回；
}
this.themeToggle=themeToggle；
this.themeToggle.addEventListener（'click'，（）=>this.switchTheme（））；
//获取初始主题并应用它
this.theme=主题；
if（localStorage.getItem（'data-theme'））{
if（localStorage.getItem（'data-theme'）==（theme=='light'？'dark'：'light'））{
this.theme=（theme=='light'？'dark'：'light'）；
}
}
else if（window.matchMedia（`（首选配色方案：${（主题==='light'？'dark'：'light'）}）`）。匹配）{
this.theme=（theme=='light'？'dark'：'light'）；
}
这个；
//添加侦听器以在操作系统主题更改时更改web主题
window.matchMedia（‘（首选颜色方案：灯光）’）.addEventListener（‘更改’，（e）=>{
this.theme=（e.matches？'light'：'dark'）；
这个；
});
}
/**
*Private\u applyTheme设置documentElement和localStorage的“数据主题”属性
*由于“数据主题”上的css更改，有效地更改了页面样式
*/
_applyTheme=（）=>{
this.themeToggle.innerHTML=（this.theme=='light'？'Dark'：'light'）；
document.documentElement.setAttribute（'data-theme'，this.theme）；
localStorage.setItem（'data-theme'，this.theme）；
}
/**
*切换主题切换切换事件“单击”上的网站主题
*/
switchTheme=（）=>{
this.theme=（this.theme=='light'？'dark'：'light'）；
这个；
}
}

加