WP+Oxygen页面点击图片切换类状态，如何实现刷新后状态留存？

问题背景 #

我们用WordPress（WP）和Oxygen搭建了页面，目前用以下脚本实现点击图片切换CSS类（改变透明度）的功能：

jQuery(".box,.box1,.box2").click(function () {
      jQuery(this).toggleClass("red"); 
});

客户要求这个状态能“锁定”——页面刷新、浏览器重启甚至断电后都不会改变，只有用户再次点击图片才切换状态。我不是专业开发者，想要尽可能简单的实现方案，比如用Cookies还是其他方法？

之前的尝试问题 #

我试过下面的代码，单个div时效果正常，但添加多个div后，页面刷新时所有div状态会同步，显然存在问题：

jQuery("#div,#div1,#div2").addClass(localStorage.getItem('ClassName')) ; 
jQuery("#div,#div1,#div2").on("click",function(){
if(jQuery(this).hasClass('active')){ 
    jQuery(this).removeClass("active").addClass("normal"); 
    localStorage.setItem('ClassName', 'normal'); 
}
else{ 
    jQuery(this).removeClass("normal").addClass("active");
    localStorage.setItem('ClassName', 'active'); 
} 
});

简单解决方案（用localStorage） #

用浏览器的localStorage就能实现，核心是给每个元素分配唯一标识（比如id），让每个元素的状态单独存储，而不是共用一个存储键。

步骤1：给每个元素加唯一id

给页面上所有需要切换状态的元素（.box、.box1、.box2对应的元素）添加唯一id，比如：

• 第一个元素加id="box-1"
• 第二个加id="box-2"
• 第三个加id="box-3"

步骤2：替换为以下代码

直接替换你原来的脚本即可，代码里的注释会说明每一步做什么：

// 页面加载完成后执行
jQuery(document).ready(function() {
  // 选择所有需要切换状态的元素（和你原来的选择器保持一致）
  const toggleItems = jQuery(".box,.box1,.box2");

  // 遍历元素，恢复之前保存的状态
  toggleItems.each(function() {
    const itemId = jQuery(this).attr("id");
    // 如果元素没有id，跳过（所以必须给每个元素加唯一id）
    if (!itemId) return;

    // 从localStorage读取该元素的保存状态
    const savedClass = localStorage.getItem(`toggle-state-${itemId}`);
    if (savedClass) {
      jQuery(this).addClass(savedClass);
    }
  });

  // 绑定点击事件，切换类并保存状态
  toggleItems.click(function() {
    const $currentItem = jQuery(this);
    const itemId = $currentItem.attr("id");
    if (!itemId) return;

    // 切换red类（和你原来的逻辑一致）
    $currentItem.toggleClass("red");

    // 保存当前状态：如果有red类就存"red"，否则存空字符串
    const currentState = $currentItem.hasClass("red") ? "red" : "";
    localStorage.setItem(`toggle-state-${itemId}`, currentState);
  });
});

注意事项

• 必须确保每个元素的id唯一，否则不同元素会共用状态，导致刷新后同步的问题
• localStorage存储在用户浏览器本地，只要用户不手动清除浏览器缓存，状态会一直保留，满足刷新、重启浏览器甚至断电的需求
• 代码里的选择器.box,.box1,.box2要和你页面上的元素类名完全一致，别写错

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