Changing a class with JavaScript, how to add to localstorage?

Viewed 86

So, I'm toggling between two Font Awesome icons, fas fa-toggle-off and fas fa-toggle-on to effectively create a switch effect when clicked. The switch changes my site or rather appears to change my site from dark mode to light mode however the code for the style sheet toggle is entirely separate. All I'm working on here is the switch effect by toggling FA icons. I want the class toggling to be retained across the site and I'm not sure how to integrate something like say localStorage with what I have right now since I'm pretty new to JS. Not using jQuery and don't want to.

Here's what is going on:

HTML

<i class="fas fa-toggle-off" id="switch"></i>

JavaScript

let mode = document.getElementById('switch');

function toggleClass(el, c1, c2) {
    el.classList.toggle(c1);
    el.classList.toggle(c2);
}

function myToggle(el, c1, c2) {
    toggleClass(mode, "fa-toggle-off", "fa-toggle-on");
}

mode.addEventListener('click', myToggle);

What can I add to this to make either class (whatever the user chooses when toggling the switch) remain there across the site? Obviously it works for one page, but then reverts back or resets on other pages.

0 Answers
Related