How to toggle a status in localStorage

Question

I am trying to use localStorage for the first time to toggle a dark mode status. I am struggling to get it to work when refreshing and changing pages.

Any help with my code in order to understand my errors would be appreciated.

if(!localStorage.getItem('status')) {
      localStorage.setItem('status', 'light');
    }

dmToggle.onclick = () => {
  if (localStorage.getItem('status') === 'light') {
    makeDark();
    localStorage.setItem('status', 'dark');
  } else if (localStorage.getItem('status') === 'dark') {
    makeLight();
    localStorage.setItem('status', 'light');
  }
}

Currently status only toggles after the second click, and page reverts to light mode on refresh or page switch.

This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? — David, May 10 '23 at 11:22
The code provided does not have initial calls of ```makeDark();``` or ```makeLight();```. Are there any but in onclick? — Syperia, May 10 '23 at 11:28
@Syperia The makeDark/Light functions are defined, but this is their first call. The page is default light (defined in css). The issue with the code does not seem to be the functions, but instead the setting & getting of the status in localStorage. — Tom Yemm, May 10 '23 at 11:32
@TomYemm the question was about initial calls. It is expected that you will do initialisation like ``` if(!localStorage.getItem('status')) { localStorage.setItem('status', 'light'); } else { localStorage.getItem('status') === 'light' ? makeLight() : makeDark(); } ``` — Syperia, May 10 '23 at 11:54
@syperia ` dmToggle.onclick = () => { if(!localStorage.getItem('status')) { localStorage.setItem('status', 'light'); } else if (localStorage.getItem('status') === 'light') { makeDark(); localStorage.setItem('status', 'dark'); } else { makeLight(); localStorage.setItem('status', 'light'); } } ` Reformatted to the above, but identical results to my initial code. — Tom Yemm, May 10 '23 at 12:02
@TomYemm: Can you update the question to a runnable [mcve] which demonstrates the problem, and indicate specifically what problem you are observing when you debug? — David, May 10 '23 at 12:02

score 0 · Answer 1 · answered May 11 '23 at 10:53

if (localStorage.getItem("status") === "dark") {
  makeDark();
} else {
  makeLight();
}

dmToggle.onclick = () => {
  if (localStorage.getItem('status') === 'light') {
    makeDark();
    localStorage.setItem('status', 'dark');
  } else {
    makeLight();
    localStorage.setItem('status', 'light');
  }
}

Solved!

When debugging I noted that the 'status' was correct on page load, but was not being initialised.

Thanks for the help!

score -2 · Answer 2 · answered May 10 '23 at 12:39

-2

This is the working version of what you're trying to achieve:

const THEME_KEY = 'status';

function getThemeFromStorage() {
    return localStorage.getItem(THEME_KEY);
}

function setThemeToStorage(themeName) {
    localStorage.setItem(THEME_KEY, themeName);
}

function setTheme(themeName) {
  setThemeToStorage(themeName);
  document.querySelector('#targetEl').classList.value = themeName;
}

// Init. Default to 'light'
setTheme(getThemeFromStorage() || 'light');

document.querySelector('#button').onclick = () => {
    setTheme(getThemeFromStorage() === 'light' ? 'dark' : 'light');
}

div {
  width: 100px;
  height: 100px;
}

.dark {
  background: #000;
}

.light {
  background: #ccc;
}

<div id="targetEl"></div>
<button id="button">Toggle theme</button>

You may try it out here

answered May 10 '23 at 12:39

Syperia

94
7

2

This is probably a perfectly working example of what OP tries to achieve. However, what will the OP learn from this? What did you do to help him **understand** his errors? – Wimanicesir May 10 '23 at 13:27
What specifically wasn't working in the code shown in the question? How does this code correct that specific problem? – David May 10 '23 at 13:43
The code shown in question lacked initialisation. The code in answer provides an implementation with it. – Syperia May 10 '23 at 13:52

How to toggle a status in localStorage

2 Answers2