jQuery .expand点击事件如何添加localStorage保存用户设置

• 你的展开/收起功能是典型的二值状态（展开、收起），不需要存储DOM快照或者多个类名，只要存一个轻量化的状态标识即可，减少存储占用。
• 功能拆为两个独立流程：
  • 点击交互流程：执行完原有切换逻辑后，把当前最新的状态同步写入localStorage
  • 页面加载流程：DOM就绪后先从localStorage读取上次保存的状态，直接执行对应的初始化逻辑，无需用户手动点按钮就能还原上次的交互状态

首先修复原有代码中两个独立绑定在.expand上的click事件的冗余问题（原写法会导致两个回调依次执行，逻辑耦合混乱），再嵌入localStorage的存储、读取逻辑，完整可运行代码如下：

// 定义固定的存储key，避免项目开发过程中出现拼写错误
const EXPAND_STATE_KEY = 'videoModuleExpandStatus';

// 合并原有两个重复的点击绑定逻辑
$(".expand").click(function() {
    // 保留原有类名切换逻辑
    $(".megavid").toggleClass("xp");
    $(".pd-expand").toggleClass("sxp");

    // 保留原有DOM位置调整逻辑，补充状态存储
    if ($(this).hasClass('slamdown')) {
      // 切回展开态的分支
      $(this).removeClass('slamdown');
      jQuery(".mvelement").prependTo(jQuery(".megavid"));
      // 存储展开态标识
      localStorage.setItem(EXPAND_STATE_KEY, 'expanded');
    } else {
      // 切到收起态的分支
      $(this).addClass('slamdown');
      jQuery(".mvelement").appendTo(jQuery(".pd-expand"));
      // 存储收起态标识
      localStorage.setItem(EXPAND_STATE_KEY, 'collapsed');
    }
});

// 页面DOM就绪后，读取存储状态完成初始化
$(document).ready(function() {
    const savedStatus = localStorage.getItem(EXPAND_STATE_KEY);
    
    if (savedStatus === 'collapsed') {
        // 还原上次保存的收起态状态
        $(".expand").addClass('slamdown');
        $(".megavid").removeClass("xp");
        $(".pd-expand").removeClass("sxp");
        jQuery(".mvelement").appendTo(jQuery(".pd-expand"));
    } else {
        // 首次访问无存储值/上次保存的是展开态，直接初始化展开态
        $(".expand").removeClass('slamdown');
        $(".megavid").addClass("xp");
        $(".pd-expand").addClass("sxp");
        jQuery(".mvelement").prependTo(jQuery(".megavid"));
    }
});

• 全程未修改原有业务的类名切换、DOM移动逻辑，只是在原有状态分支末尾补充了本地存储写入的代码，和原有功能100%兼容。
• 做了首次访问、本地缓存被清除的兼容场景：无有效存储值时，会自动按照默认展开态初始化，不会出现元素错位、类名不匹配、JS报错的问题。
• 没有采用“读取状态后手动触发按钮点击”的初始化方式，避免触发原有回调中可能存在的埋点、动画、额外逻辑的重复执行，性能更可控。
• 存储key单独定义为常量，后续如果要调整存储标识，只需修改常量值即可，不需要全局替换代码。

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