javascript - Reversing a Boolean stored in localStorage

Question

I have a button that toggles dark mode. I store the dark mode state as Boolean in localStorage.

The button invokes this function that should flip the Boolean, but it isn't working.

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

Any ideas?

Answer 1

Items in local storage are stored as strings, thus you need to turn your "true"/"false" values into true/false (boolean) values before you can use darkMode as a boolean:

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

Also note: In general to get an item from localStorage we use getItem(key)