how to save toogle class with localstorage/cookies. so can someone check what's wrong with this-CodePudding

if( localStorage.getItem("color") == "black" ) {
  
     var classlist = document.getElementById("body").classList;
     clasList.add("bdark");
     classList = document.getElementById("theader").classList;
     classList.add("hdark");
     classList = document.getElementById("sh").classList;
     classList.add("shh");
     var hs = document.getElementById("hs").classList;
     document.getElementById("hs").style.display = "block";
     
  
}

function myFunction() {
 
     var classlist = document.getElementById("body").classList;
     clasList.toggle("bdark");
     classList = document.getElementById("theader").classList;
     classList.toggle("hdark");
     classList = document.getElementById("sh").classList;
     classList.toggle("shh");
     var hs = document.getElementById("hs");
     if (hs.style.display === "block") {
       hs.style.display = "none";
     } else {
       hs.style.display = "block";
     }
     
     var color;
     if(localStorage.getItem("color") == "black") {
       color = "black";
       
     localStorage.setItem("color",color)

}

.bdark {
  background-color: #333;
  color: white;
}

.hdark {
  background-color: black;
  color: white;
}

.shh {
  display: none;
}

.hs {
  display: none;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body id="body" >

<p id="theader">Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p>

<button id="button" onclick="myFunction()">Try it</button>

<div id="myDIV">
This is a DIV element.
</div>

<div id="aaas">
 <div id="sh" >&#9790;</div>
 <div id="hs" >&#9728;</div>
</div>

</body>
</html>

i want this code to onclick toggle class and when i refresh the page those toggled class remain same as they were before reloading the page with localstorage. so can someone check what's wrong with this code. help me with something similar/alternative to this one. thanks for reading this.

Details:-

i want this code to work as (onclick class change saved with cokies/localstorage/or anything) so whenever i refresh or reopen the page it would be same class as it was when i left. or some alternative code that works same.

CodePudding user response：

There are variable spelling mistakes in your code (declared as classlist and used as clasList)
missed closed brackets for the if condition in myFunction.
updated logic for storing color value.

I updated the above changes in your code.

I have added code here also you can check output in it.

Updated code:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body id="body" >

    <p id="theader">Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p>

    <button id="button" onclick="myFunction()">Try it</button>

    <div id="myDIV">
        This is a DIV element.
    </div>

    <div id="aaas">
        <div id="sh" >&#9790;</div>
        <div id="hs" >&#9728;</div>
    </div>

</body>

</html>

.bdark {
    background-color: #333;
    color: white;
}

.hdark {
    background-color: black;
    color: white;
}

.shh {
    display: none;
}

.hs {
    display: none;
}

if (localStorage.getItem("color") === "black") {
    var classlist = document.getElementById("body").classList;
    classlist.add("bdark");
    classlist = document.getElementById("theader").classList;
    classlist.add("hdark");
    classlist = document.getElementById("sh").classList;
    classlist.add("shh");
    document.getElementById("hs").style.display = "block";


}

function myFunction() {

    var classlist = document.getElementById("body").classList;
    classlist.toggle("bdark");
    classlist = document.getElementById("theader").classList;
    classlist.toggle("hdark");
    classlist = document.getElementById("sh").classList;
    classlist.toggle("shh");
    var hs = document.getElementById("hs");
    if (hs.style.display === "block") {
        hs.style.display = "none";
    } else {
        hs.style.display = "block";
    }


    if (localStorage.getItem("color") === "black") {
        localStorage.setItem("color", "white");
    } else {
        localStorage.setItem("color", "black");
    }



}