WordPress后台：页面刷新时如何保存Checkbox状态

问题说明 #

需要实现WordPress后台页面刷新时，复选框状态能够保留，且同步控制对应菜单的显示/隐藏。当前已完成复选框点击时的菜单控制功能，但尝试用localStorage保存状态的代码未生效，需改写实现。

现有代码 #

JavaScript（菜单控制逻辑） #

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-portfolio").removeClass("active");
           jQuery("#menu-posts-woodmart_size_guide").removeClass("active");
           jQuery("#menu-posts-woodmart_slide").removeClass("active");
          
        }
});})

CSS样式 #

#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;
}

HTML结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
  <input type="checkbox" id="advanced_menu_switch">
  <span class="slider"></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>

无效的状态保存代码 #

之前尝试添加以下代码，但未生效：

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;

可行改写方案 #

问题核心在于状态保存时机和初始化逻辑错误，调整后代码如下：

完整JavaScript代码 #

jQuery(document).ready(function(){
    // 页面加载时恢复保存的状态
    var savedState = localStorage.getItem("advanced_menu_switch");
    var checkbox = jQuery("#advanced_menu_switch");
    
    if(savedState !== null){
        var isChecked = savedState === "true";
        checkbox.prop("checked", isChecked);
        
        // 根据保存状态同步菜单显示
        var menuItems = jQuery("#menu-posts-cms_block, #menu-posts-portfolio, #menu-posts-woodmart_size_guide, #menu-posts-woodmart_slide");
        isChecked ? menuItems.addClass("active") : menuItems.removeClass("active");
    }

    // 复选框点击时保存状态并更新菜单
    checkbox.on("click",function(){
        var isChecked = jQuery(this).is(":checked");
        
        // 保存状态到localStorage（需转字符串，因为localStorage仅支持字符串存储）
        localStorage.setItem("advanced_menu_switch", isChecked.toString());
        
        // 更新菜单显示
        var menuItems = jQuery("#menu-posts-cms_block, #menu-posts-portfolio, #menu-posts-woodmart_size_guide, #menu-posts-woodmart_slide");
        isChecked ? menuItems.addClass("active") : menuItems.removeClass("active");
    });
});

关键修改点 #

1. 初始化逻辑：页面加载时优先读取localStorage状态，同步复选框和菜单的初始状态
2. 保存时机：将状态保存逻辑放入复选框点击事件内，确保每次操作都更新存储
3. 数据类型处理：把布尔值转为字符串存储，读取时再转回布尔类型，避免localStorage类型丢失问题
4. 代码简化：用多元素选择器合并重复的菜单操作代码

内容的提问来源于stack exchange，提问作者yasin taqizade