Изменить тему и сохранить ее в локальном хранилище

Question

У меня есть две темы: «темная» и «светлая», и я хочу, чтобы при смене темы тема менялась.

Вот как я сменил тему:

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

СделалЯ ошибся или есть что-то, чего я не понимаю?

Answer 1

Может попробовать это так:

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>

Answer 2

Вам потребовалось несколько шагов, чтобы узнать об этих решениях:

• получить предыдущее установленное значение из localStroge
• получить элемент флажка
• установить флажок условно на основе предыдущего значения локального хранилища, если не установлен, то по умолчанию false

и, наконец, установить и сбросить логику

var dragTheme = window.localStorage.getItem('dark-theme'); //get the privious seted value
var themeCheckBox = document.getElementById('themeCheck'); // get the checkbox element
themeCheckBox.checked = (dragTheme == "true")? true : false; // set checkbox conditionally base on privious set value if not set then default false

function myFunction() { // triger when change value of checkbox
   if(themeCheckBox.checked) {
      document.documentElement.setAttribute('dark-theme', 'dark');
      window.localStorage.setItem('dark-theme', true);
   }else {
      document.documentElement.setAttribute('dark-theme', 'light');
      window.localStorage.setItem('dark-theme', false);
   }
}

<label for="themeCheck">
  <input type="checkbox" id="themeCheck" onchange="myFunction()" /> Drak Theme
</label>