Keep added class from radio buttons on reload

Question

I've been working at this code for hours and keep running into a variety of issues, so the number of times I have edited and tried different ways of coding this is a lot. Basically, I am trying to create a 3 (or more) color theme toggler using radio buttons. It's supposed to add a class, based on which one has been selected, to the body tag so that I can use css and variables to change the styling.

I've gotten it to actually add the class to the body tag, but when reloading, it won't keep the class. I keep reading about localStorage, so I've tried adding that, but I've never used it before, so I don't know if the several ways I have tried are just... wrong or if they just don't work with what I'm trying to do.

I can only use JavaScript and/or JQuery. Here is what I currently have.

HTML

<input name="theme" type="radio" aria-label="Light" id="light" value="light">
<label for="light">Light</label>

<input name="theme" type="radio" aria-label="Medium" id="medium" value="medium">
<label for="medium">Medium</label>

<input name="theme" type="radio" aria-label="Dark" id="dark" value="dark">
<label for="dark">Dark</label>

SCRIPT

jQuery(window).on("load", function() {
    $("#light").click(function(){
        $("body").removeClass("medium");
        $("body").removeClass("dark");
        $("body").addClass("light");
        localStorage.ClassName = "light";
    });

    $("#medium").click(function() {
        $("body").removeClass("light");
        $("body").removeClass("dark");
        $("body").addClass("medium");
        localStorage.ClassName = "medium";
    });

    $("#dark").click(function() {
        $("body").removeClass("light");
        $("body").removeClass("medium");
        $("body").addClass("dark");  
        localStorage.ClassName = "dark";
    });
});

I have also, to note, tried the individual sections (with their relevant class names) as

$("#dark").click(function() {
    $("body").removeClass("light");
    $("body").removeClass("medium");
    $("body").addClass(localStorage.getItem('dark'));
});

Answer 1

Your Problem is localStorage.getItem("dark") Should Be localStorage.getItem("ClassName")

And a best practice you should use method localStorage.setItem("ClassName", "light") to assign data

Here is a MDN article about LocalStorage.

This your code edited:

jQuery(window).on("load", function() {
    $("#light").click(function(){
        $("body").removeClass("medium");
        $("body").removeClass("dark");
        $("body").addClass("light");
        localStorage.setItem("ClassName", "light")
    });

    $("#medium").click(function() {
        $("body").removeClass("light");
        $("body").removeClass("dark");
        $("body").addClass("medium");
        localStorage.setItem("ClassName", "medium")
    });

    $("#dark").click(function() {
        $("body").removeClass("light");
        $("body").removeClass("medium");
        $("body").addClass("dark");  
        localStorage.setItem("ClassName", "dark")
    });
});

$("#dark").click(function() {
    $("body").removeClass("light");
    $("body").removeClass("medium");
    $("body").addClass(localStorage.getItem('ClassName'));
});