Блог

У меня есть кнопка, которая переключает темный режим. Я сохраняю состояние темного режима как логическое в localStorage.

Кнопка вызывает эту функцию, которая должна перевернуть логическое значение, но она не работает.

 const handleDarkMode = () => {
  let darkMode = localStorage.darkMode
  localStorage.setItem("darkMode", !darkMode)
}
 

Есть какие-нибудь идеи?

Элементы в локальном хранилище хранятся в виде строк, поэтому вам необходимо преобразовать ваши "true" / "false" значения в true / false (логические) значения, прежде чем вы сможете использовать darkMode их в качестве логических:

 const handleDarkMode = () => {
  let darkMode = localStorage.darkMode === "true"; // change "true" to true and others to false
  localStorage.setItem("darkMode", !darkMode)
}
 

Также обратите внимание: В общем случае для получения товара из локального хранилища мы используем getItem(key)

localStorage преобразует логическое значение в строку, поэтому вам нужно проверить это таким образом.

 const handleDarkMode = () => {
  let darkMode = localStorage.getItem('darkMode') === 'true';
  localStorage.setItem('darkMode', !darkMode);
}