Как сохранить режим «Вкл / Выкл» кнопки «Переключатель» на странице Refre sh для веб-сайта?

Question

Я пытаюсь использовать тумблер W3Schools для моего веб-сайта. Переключение темного / светлого режима.

Это моя тестовая страница веб-сайта , в которую я добавил тумблер, но происходит то, что он не может сохранить свой режим «вкл / выкл» при обновлении страницы.

он возвращается к своему стандартному режиму «выкл» при обновлении sh Страница.

Как сохранить ее позицию на странице Refre sh? Пожалуйста, поделитесь кодом.

Спасибо

Answer 1

Первое обновление ниже кода на "// На странице загрузки темы." сечение

var tSwitcher = document.getElementById('theme-switcher');
let element = document.body;

let onpageLoad = localStorage.getItem("theme") || "";
if(onpageLoad != null && onpageLoad  == 'dark-mode'){
  tSwitcher.checked = true;
} 
element.classList.add(onpageLoad);


function themeToggle(){
  if(tSwitcher.checked){
      localStorage.setItem('theme', 'dark-mode');
        element.classList.add('dark-mode');
    } else {
      localStorage.setItem('theme', '');
        element.classList.remove('dark-mode');
    }
}

и изменение

<input type="checkbox"  onclick="themeToggle()">

to 

<input type="checkbox"  onclick="themeToggle()" id="theme-switcher">

Answer 2

Вы можете сохранить состояние переключения (включено или выключено в localalstorage) и получить значение из localalstorage.