Почему этот код не работает?

Question

[vertically-challenged]

Я сделал состояние темы, зависимое от состояния чекбокса с помощью CSS, тема переключается, но встала потребность сохранить состояние темы при перезагрузки страницы, и я написал скрип ниже, но почему-то после первого переключения после перезагрузке страницы тема устанавливается всегда светлой, кажется, что значение, записанное в localStorage, никак на это не влияет, будь там хоть true, хоть false.
В общем, программа ведет себя крайне странно, при загрузке всегда устанавливается светлая темя, и я не могу понять почему

(function () {
  const themeCheckBox = document.querySelector('#theme-toggle')
  const themeLabel = document.querySelector('.theme-toggle')

  themeLabel.addEventListener('click', () => {
    localStorage.setItem('themeCheckBox', themeCheckBox.checked)
  })

  themeCheckBox.checked = localStorage.getItem('themeCheckBox')
})()

Comments

[Алексей Дубровин]

Вот по этому

themeCheckBox.checked = localStorage.getItem('themeCheckBox')

никак на это не влияет, будь там хоть true, хоть false.

- Это еще почему?

[vertically-challenged]

Алексей Дубровин, А что здесь не так?

[Lynn «Кофеман»]

Подозневаю, потому что в localStorage хранятся строки.
И строка "false" это true.

Answer 1

[Вадим]

Локал стораж хранит строки. Поэтому при установке в него false, будет храниться 'false'.
checked ожидает - boolean.
строка 'false' - конвертируется в true, потому что любая не пустая строка конвертируется в true. Это основа языка.

соответтсвенно:

-themeCheckBox.checked = localStorage.getItem('themeCheckBox')
+themeCheckBox.checked = localStorage.getItem('themeCheckBox') === 'true'

Answer 2

[Rsa97]

localStorage хранит только текстовые значения. Соответственно, когда вы пишете в него булево значение true/false, то после считывания получаете строку "true"/"false". Ну а непустая строка всегда эквивалентна true.

Answer 3

[Сергей delphinpro]

(function () {
   const themeCheckBox = document.querySelector('#theme-toggle')
   const themeLabel = document.querySelector('.theme-toggle')

   themeLabel.addEventListener('click', () => {
-    localStorage.setItem('themeCheckBox', themeCheckBox.checked)
+    localStorage.setItem('themeCheckBox', themeCheckBox.checked ? '1' : '')
   })

-  themeCheckBox.checked = localStorage.getItem('themeCheckBox')
+  themeCheckBox.checked = !!localStorage.getItem('themeCheckBox')
})()

Вариант попроще

themeCheckBox.checked = localStorage.getItem('themeCheckBox')==='true'