Bootstrap Collapse本地存储异常：关闭项时误删多个条目求助

你的代码出现删除多个条目的问题，核心原因是在处理hide.bs.collapse事件时错误使用了数组的splice方法：splice会返回被删除的元素，而你把这个返回值当成剩余元素拼接后存储，导致结果完全错误。另外原代码还存在重复添加同一ID、边界处理不严谨的问题，以下是修复后的完整代码：

$(".content-accordion-content").each(function(index) {
    const collapseId = $(this).attr("id");
    console.log(index, collapseId);

    // 页面加载时恢复之前的展开状态
    const savedExpanded = localStorage.getItem("ExpandedCollapses");
    if (savedExpanded) {
        const expandedIds = savedExpanded.split("|");
        if (expandedIds.includes(collapseId)) {
            $(this).collapse("show");
        }
    }

    $(this).on("show.bs.collapse", function() {
        let expandedIds = [];
        const saved = localStorage.getItem("ExpandedCollapses");
        if (saved) {
            expandedIds = saved.split("|");
        }
        // 避免重复添加同一ID
        if (!expandedIds.includes(collapseId)) {
            expandedIds.push(collapseId);
            localStorage.setItem("ExpandedCollapses", expandedIds.join("|"));
        }
    });

    $(this).on("hide.bs.collapse", function() {
        const saved = localStorage.getItem("ExpandedCollapses");
        if (!saved) return;

        const expandedIds = saved.split("|");
        const idIndex = expandedIds.indexOf(collapseId);
        // 找到对应ID再执行删除
        if (idIndex !== -1) {
            expandedIds.splice(idIndex, 1);
            localStorage.setItem("ExpandedCollapses", expandedIds.join("|"));
        }
        console.log(expandedIds.join("|"), collapseId);
    });
});

关键修改说明： #

• 统一用数组管理ID：无论是读取还是存储，先把localStorage的字符串转成数组，操作完成后再转回字符串，避免字符串拼接的边界问题
• 修复splice的使用错误：删除元素后，将修改后的原数组（而非splice返回的被删除元素）拼接存储
• 增加重复ID判断：展开时先检查ID是否已存在，避免重复添加
• 添加页面加载恢复逻辑：原代码只处理了存储，补充了页面刷新后恢复之前展开状态的功能
• 简化边界条件判断：用更简洁的方式处理localStorage为空的情况

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