Блог

Главная - Вопросы по программированию - Как сохранить флажок активным после обновления

Как сохранить флажок активным после обновления

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь создать темную тему для своего веб-сайта, и я использовал флажок, чтобы это работало. Я написал некоторый JS-код, и после обновления я хочу, чтобы статус проверки оставался прежним (если темная тема была включена до обновления, она должна оставаться прежней). Я попытался использовать localStorage, но с помощью этого мне ничего не удалось добиться. Есть какие-нибудь идеи?

 const toggle = document.getElementById('toggle');
const body = document.body;

toggle.addEventListener('input', e => {
  const isChecked = e.target.checked;

  if (isChecked) {
    localStorage.body.classList.add('dark-theme');
  } else {
    body.classList.remove('dark-theme');
  }
});
 
 <div class="toggle">
  <input type="checkbox" id="toggle" autocomplete="off" />
  <label for="toggle"></label>
  <h4 class="credits" id="credits">amp;#169; Irimia Nicolae amp; Zaramp;#259; Mihnea Tudor</h4>
</div>

Комментарии:

1. Что такое localStorage.body ? Я собирался предложить вам использовать localStorage , но, похоже, вы использовали его неправильно

2. Ну, const body представляет тело моего html. Если я удалю оттуда localStorage, мой код будет работать нормально, но при обновлении возвращается к значению non checked

Ответ №1:

Вот как вы можете использовать localStorage

 const toggle = document.getElementById('toggle');
const body = document.body;

const toggleTheme = () => {
  const isChecked = toggle.checked;
  body.classList.toggle('dark-theme',isChecked);
  localStorage.setItem('theme',isChecked ? 'dark-theme' : ''); // how to store
};

toggle.checked = localStorage.getItem('theme'); // how to read - check if found
toggle.addEventListener('input', toggleTheme); // run when clicking
toggleTheme(); // initialise on load
Метки: