title: Keep toggle switch enabled or disabled when page is switched or refreshed
body: <p>I got a toggle that switches between dark mode and light mode:</p>
  <pre><code>&lt;div class=&quot;dark-mode-toggler&quot;&gt;
      &lt;input type=&quot;checkbox&quot; id=&quot;dark-mode-toggler&quot;/&gt;
      &lt;label for=&quot;dark-mode-toggler&quot; aria-label=&quot;Toggler for Dark Mode&quot;&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Then I got a script that switches to dark mode when the toggle switch is clicked:</p>
  <pre><code>&lt;script&gt;
                // check for saved 'darkMode' and 'darkModeToggle' in localStorage
                let darkMode = localStorage.getItem('darkMode');
  
                const darkModeToggle = document.querySelector('#dark-mode-toggler');
                
  
                const enableDarkMode = () =&gt; {
                  // 1. Add the class to the body
                  document.body.classList.add('darkmode');
                  // 2. Update darkMode in localStorage
                  localStorage.setItem('darkMode', 'enabled');
                }
  
                const disableDarkMode = () =&gt; {
                  // 1. Remove the class from the body
                  document.body.classList.remove('darkmode');
                  // 2. Update darkMode and toggle in localStorage 
                  localStorage.setItem('darkMode', null);
                }
                
                // If the user already visited and enabled darkMode
                // start things off with it on
                if (darkMode === 'enabled') {
                  enableDarkMode();
                }
  
                // When someone clicks the button
                darkModeToggle.addEventListener('click', () =&gt; {
                  // get their darkMode setting
                  darkMode = localStorage.getItem('darkMode');
                  
                  // if it not current enabled, enable it
                  if (darkMode !== 'enabled') {
                    enableDarkMode();
                  // if it has been enabled, turn it off  
                  } else {  
                    disableDarkMode(); 
                  }
                });
  &lt;/script&gt;
  </code></pre>
  <p>But when I refresh or switch page, the toggle switch is reset.
  How can we use localStorage to save the toggle switch status and load the current status when switching or refreshing pages?</p>
  <p>Here is my CSS for completeness</p>
  <pre><code>             .dark-mode-toggler {
                  position: fixed;
                  top: 5px;
                  right: 20px;
                }
                .dark-mode-toggler label {
                  position: relative;
                }
                .dark-mode-toggler input[type='checkbox'] {
                  display: none;
                }
                .dark-mode-toggler input[type='checkbox'] + label::before {
                  content: '';
                  display: block;
                  height: 26px;
                  width: 60px;
                  background: #fff;
                  border: 2px solid #96979c;
                  border-radius: 15px;
                  position: absolute;
                  top: 0px;
                  left: -65px;
                }
                .dark-mode-toggler input[type='checkbox'] + label::after {
                  content: '';
                  display: block;
                  height: 20px;
                  width: 20px;
                  background: #96979c;
                  border: 2px solid #fff;
                  border-radius: 50%;
                  position: absolute;
                  top: 3px;
                  left: -62px;
                  transition: all 0.4s ease-in;
                }
                .dark-mode-toggler input[type='checkbox']:checked + label::before {
                  background: #000;
                  border: 2px solid #fff;
                }
                .dark-mode-toggler input[type='checkbox']:checked + label::after {
                  left: -28px;
                  background: #000;
                  border: 2px solid #fff;
                  transition: all 0.4s ease-in;
                }
                :root {
                  --clr-light: transparent;
                  --clr-dark: #00332a;
                  --clr-primary: #dbffa2;
                  --clr-secondary: #c3fcf2;
                  --clr-accent: #ff7750;
                
                  --foreground: var(--clr-dark);
                  --background: var(--clr-light);
                }
                .darkmode {
                  --clr-light: #fdffc4;
                  --clr-dark: #00332a;
                  --clr-primary: #202302;
                  --clr-secondary: #00100d;
                  --clr-accent: #ff7750;
                
                  --foreground: var(--clr-light);
                  --background: var(--clr-dark);
                }
                body {
                  background: var(--background);
                  color: var(--foreground);
                }
  </code></pre>