Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Localstorage value not updating

I have a toggle button that switches between light / dark mode.

When toggled off, the "mode" local storage key is set to light, when on, "mode" is set to "dark-mode". Or at least that is what is supposed to happen. What ACTUALLY happens is that "mode" is set to light, and never changes to "dark-mode" (I’m monitoring this in the browser dev console).

When the button is toggled, the page does switch between dark and light mode, the problem is that when the page is refreshed, it defaults to light mode due to the issue described above.

My code:

$(document).ready(function() {
  const checkbox = document.getElementById("checkbox")
  checkbox.addEventListener("change", () => {
    document.body.classList.toggle("dark-mode")
    if (document.body.classList == "dark-mode") {
      localStorage.setItem('mode', 'dark-mode');
    } else {
      localStorage.setItem('mode', 'light');
    }
  });

  let mode;
  mode = localStorage.getItem('mode');

  if (mode === 'light') {
    lightMode();
  } else {
    darkMode();
  }

  function darkMode() {
    document.body.classList.add("dark-mode");
    localStorage.setItem('mode', 'dark-mode');
    mode = localStorage.getItem('mode');
  }

  function lightMode() {
    document.body.classList.remove("dark-mode");
    localStorage.setItem('mode', 'light');
    mode = localStorage.getItem('mode');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="checkbox-label">
    <i class="fas fa-moon"  title="Dark Mode"></i>
    <i class="fas fa-sun" title="Light Mode"></i>
    <span class="ball"  title="Toggle Light / Dark Mode"></span>
</label>

Thanks in advance for your help!

Tags:

2

Answers


  1. 0

    This happens because the code is missing updating the checkbox initialization after the page load.

    You can fix this by checkbox.setAttribute('checked', ''); following after #17. lightMode();

        if (mode === 'light') {
      lightMode();
      checkbox.setAttribute('checked', ''); // New code
    } else {
      darkMode();
    }
    Login or Signup to reply.
  2. 0

    prefer something like this way:
    HTML

    <label>
  <input type="checkbox" id="chkBxLightDarkMode">
  <i class="fas fa-moon"  title="Dark Mode"></i>
  <i class="fas fa-sun"   title="Light Mode"></i>
</label>

    CSS

    body           { background-color: whitesmoke; }
body.dark-mode { background-color: rgb(9, 29, 59); }

#chkBxLightDarkMode { appearance: none; }
#chkBxLightDarkMode ~ i.fas { font-size : 32px; }
#chkBxLightDarkMode:checked       ~ i.fa-sun,
#chkBxLightDarkMode:not(:checked) ~ i.fa-moon { display : none }

#chkBxLightDarkMode ~ i.fa-moon { color: yellow; }
#chkBxLightDarkMode ~ i.fa-sun  { color: gold;   }

    JS

    const chkBxLightDark = document.querySelector('#chkBxLightDarkMode')

chkBxLightDark.checked = (localStorage.getItem('mode') === 'dark-mode');
check4DarkMode();

chkBxLightDark.addEventListener('click', check4DarkMode )

function check4DarkMode()
  {
  document.body.classList.toggle('dark-mode', chkBxLightDark.checked )
    ? localStorage.setItem('mode', 'dark-mode')
    : localStorage.setItem('mode', 'light')  
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search