温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Change theme and store it in local storage
css javascript local-storage

javascript - 更改主题并将其存储在本地存储中

发布于 2020-03-27 10:31:48

我有两个主题:“黑暗”和“浅色”,我希望单击复选框时可以更改主题。

这是我更改主题的方式:

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');
    }
})

我犯了一个错误还是有我不明白的地方?

查看更多

查看更多

提问者
VenRus
被浏览
242
4,825 2019-07-03 21:48

可以这样尝试:

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>