[SOLVED] How do I make my local storage preserve on reloads?

How do I make my local storage preserve on reloads?

Whenever I click onto a new page on my website with my crt filter turned off, it says it saves the state and displays it in the 'application space' on the Dev Tools Page. But the visual of the page doesn’t show the correct state, rather it goes back to presenting the initial state “true” but doesn't seem to update in the 'application space'.

I have begun to learn Javascript and have gotten assistance with roughing out the code for this functionality in the past and while it kind of works, I require it to save it's state and persist that state across webpages and reloads so the user doesn't have to manually turn it off every time.

Here is a link to my site I'm trying to make this work on for reference:

https://the-rat-king-comic.neocities.org

Below is the raw code:

const targetElement = document.querySelector('body');

// set the toggle in localStorage when the button is clicked
document.querySelector('#class-toggle-button').addEventListener('click', e => {
  const hasClass = targetElement.classList.toggle("crt");
  localStorage.setItem('classApplied', hasClass);
})

// retrieve the toggle from localStorage when the page loads
if (localStorage.getItem('classApplied')) {
  targetElement.classList.add('crt');
}

@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
  .crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
  .crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 5;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
  .crt {
  animation: textShadow 1.6s infinite;
}

<body class="crt">

<button id="class-toggle-button">Crt Filter</button>

Thank you in advance for the help :)

Solution

You need to test the localStorage (string) explicitly - here is the simplest method to handle truthy - also for the first time visitor or somone who did not toggle

When first time or never toggled, leave the element's class state as it is in the HTML and store its current state in localStorage for future loads.

const targetElement = document.querySelector('body');

document.querySelector('#class-toggle-button').addEventListener('click', e => {
  const hasClass = targetElement.classList.toggle("crt");
  localStorage.setItem('classApplied', hasClass);
});

const storedState = localStorage.getItem('classApplied');
if (storedState === null) { // never set before
  localStorage.setItem('classApplied', targetElement.classList.contains('crt'));
} else {
  targetElement.classList.toggle('crt', storedState === 'true');
}