Как по клику на кнопку поменять цвет темы ,используя localStorage?

Question

[Stud]

Помогите, пожалуйста, разобраться з localStorage. Нужно по клику поменять тему сайта и записать в localStorage. При повторном клике поменять на исходную. Мой код не работает:

document.querySelector('.change-theme').addEventListener('click', () => {
    document.getElementsByTagName('body')[0].style.background = 'orange' 
    localStorage.setItem('backgroundColor', 'orange')

})

const theme = localStorage.getItem('backgroundColor')
if (theme) {
    if (theme === 'orange') {
        localStorage.setItem('backgroundColor', 'orange')

        }
    else if (theme !== 'orange') {
        localStorage.removeItem('backgroundColor', 'orange')

    }
}

Comments

[edward_freedom]

он работает как ты и задумал. Если в локалстораж цвет оранжевый, то ты повторно записываешь цвет оранж, если не оранж

[Stud]

edward_freedom, но при перезагрузке данные не сохраняются и при повторном клике на кнопку тема на исходную также не меняется

Answer 1

[RikoDiGray]

const btn = document.querySelector('.change-theme');
btn.onclick = function() {
    document.body.style.background = "orange";
    localStorage.setItem("theme", "orange");
}

window.onload = function() {
    if(localStorage.getItem("theme") != null) {
       document.body.style.background = localStorage.getItem("theme");
    } else {
      localStorage.setItem("theme", "white") // default
    }
}

Comments

[Stud]

Спасибо большое за ответ. Может я что-то не так делаю, но при повторном клике у меня тема не меняется на исходную. Исходную тему мне также нужно записать в local?

[RikoDiGray]

TatiNaumchuk,
Сделайте дополнительную проверку, на наличие текущей темы

btn.onclick = function() {
          if(localStorage.getItem("theme") != null  && localStorage.getItem("theme") 
 != "orange") {
             localStorage.setItem("theme", "orange");
          } else {
               localStorage.setItem("theme", "white"); // default theme
          }
          document.body.style.background = localStorage.getItem("theme");
      }

[Stud]

RikoDiGray, Огромное спасибо, работает))))