I want to save checkbox state when page reload.

This is my code for get checkbox state:

jQuery(document).ready(function(){
      jQuery("#advanced_menu_switch").on("click",function(){
       if(jQuery(this).is(":checked"))  {
           jQuery("#menu-posts-cms_block").addClass("active");
           jQuery("#menu-posts-portfolio").addClass("active");
           jQuery("#menu-posts-woodmart_size_guide").addClass("active");
           jQuery("#menu-posts-woodmart_slide").addClass("active");
          
        }
       else{
           jQuery("#menu-posts-cms_block").removeClass("active");
           jQuery("#menu-posts-cms_block").removeClass("active");
           jQuery("#menu-posts-portfolio").removeClass("active");
           jQuery("#menu-posts-woodmart_size_guide").removeClass("active");
           jQuery("#menu-posts-woodmart_slide").removeClass("active");
          
        }
}



);})

#adminmenu li.menu-top.menu-top-first a:hover,
#adminmenu li.menu-top.menu-top-first:hover{
    color: inherit !important;
    background-color: inherit !important;
}
.switch {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 28px;
  margin-top: 5px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked   .slider {
  background-color: #2196F3;
}

input:focus   .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked   .slider:before {
  -webkit-transform: translateX(42px);
  -ms-transform: translateX(42px);
  transform: translateX(42px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
li.active{
display:none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label >
  <input type="checkbox" id="advanced_menu_switch">
  <span ></span>
  
</label>

<li id="menu-posts-cms_block">menu-posts-cms_block</li>
<li id="menu-posts-portfolio">menu-posts-portfolio</li>
<li id="menu-posts-woodmart_size_guide">menu-posts-woodmart_size_guide</li>
<li id="menu-posts-woodmart_slide">menu-posts-woodmart_slide</li>

Now, i want to save the checkbox state when page reload. This is my code:

var checkbox = document.getElementById("advanced_menu_switch");
localStorage.setItem("advanced_menu_switch", checkbox.checked); 

//for loading
var checked = JSON.parse(localStorage.getItem("advanced_menu_switch"));
    document.getElementById("advanced_menu_switch").checked = checked;

I put this piece of code to save the state of the checkbox at the end of the function, but it doesn't work

Perhaps this idea of saving the state of the checkbox can be rewritten in another way.

Any one can help me

CodePudding user response：

There are multiple ways to save the check box state on page load but I have used a trigger method of jQuery so please find below the solution

jQuery(document).ready(function () {
   jQuery("#advanced_menu_switch").on("change", function (e) {
        if (jQuery(this).is(":checked")) {
           jQuery("#menu-posts-cms_block").addClass("active");
           jQuery("#menu-posts-portfolio").addClass("active");
           jQuery("#menu-posts-woodmart_size_guide").addClass("active");
           jQuery("#menu-posts-woodmart_slide").addClass("active");
           
           // Store value in local storage.
           localStorage.setItem("advanced_menu_switch", this.checked); 

        }else {
           jQuery("#menu-posts-cms_block").removeClass("active");
           jQuery("#menu-posts-cms_block").removeClass("active");
           jQuery("#menu-posts-portfolio").removeClass("active");
           jQuery("#menu-posts-woodmart_size_guide").removeClass("active");
           jQuery("#menu-posts-woodmart_slide").removeClass("active");

           // Remove item in local storage.
           localStorage.removeItem("advanced_menu_switch");
        }
     });
     
     // Checked checkbox value if value exist in local storage.
     setTimeout(function () {
     var checked = localStorage.getItem("advanced_menu_switch");
     if (checked == 'true') {
        jQuery("#advanced_menu_switch").prop("checked", true).trigger("change");
     }}, 0); 

});

And here you can check trigger event for checkbox