JavaScript从localStorage移除元素实现侧边栏折叠状态记忆异常求助

架构老林

2026-11-5

核心问题排查

原代码的逻辑错误主要集中在4个方面：

存储值格式完全不匹配：存入localStorage的元素是带#前缀的选择器格式（如#menu1），但点击事件中通过getAttribute('href')获取的是不带#的纯ID，后续还额外用JSON.stringify给值加了双引号，和存储数组的元素完全无法匹配，filter操作根本过滤不到任何内容。
事件绑定覆盖不全：仅给页面初始化时localStorage已存在的父节点绑定了折叠点击事件，用户操作中新展开的菜单节点完全没有绑定对应逻辑，点击折叠时不会触发存储更新。
状态监听逻辑缺失：仅监听了shown.bs.collapse（展开完成）事件自动重写存储，但没有监听hidden.bs.collapse（折叠完成）事件，折叠操作的状态变更完全没同步到localStorage，存储内容永远停留在上次展开时的状态。
闭包绑定错误：在循环中绑定click事件时，硬引用了循环结束后值已经异常的last[i]，没有通过当前点击事件的target获取触发元素，即使格式匹配也会出现绑定错乱。

修复方案

完全不需要手动绑定click事件处理存储删除，直接利用Bootstrap Collapse的内置状态事件自动同步存储：

统一存储格式：直接存储折叠面板的纯ID，不带#前缀
同时监听展开、折叠完成事件，事件触发时DOM状态已经更新，直接读取当前所有展开的面板ID，覆盖写入localStorage即可
页面初始化时读取存储列表，自动恢复对应的展开状态

修复后完整代码

$(document).ready(function () {
    // 监听折叠组件的状态变更：无论展开/折叠完成，直接同步最新状态到localStorage
    $('#sidebarmenu').on('shown.bs.collapse hidden.bs.collapse', function () {
        // 获取所有当前处于展开状态的面板ID
        const activeIds = $('#sidebarmenu .collapse.show').map(function() {
            return $(this).attr('id');
        }).get();
        // 覆盖写入localStorage，无需手动处理删除逻辑
        localStorage.setItem('activeCollapseGroup', JSON.stringify(activeIds));
    });

    // 页面初始化时恢复上次的展开状态
    const savedActiveIds = JSON.parse(localStorage.getItem('activeCollapseGroup') || '[]');
    if (savedActiveIds.length) {
        // 先清除所有默认展开状态，避免和存储状态冲突
        $('#sidebarmenu .collapse').removeClass('show');
        savedActiveIds.forEach(id => {
            // 给对应面板添加展开类
            $(`#${id}`).addClass('show');
            // 更新触发链接的aria属性，符合Bootstrap的状态规范
            $(`#sidebarmenu a[href="#${id}"]`).attr('aria-expanded', true);
        });
    }
})

修复效果说明

彻底解决了格式不匹配导致的过滤失效问题，全程使用统一的纯ID格式做存储
不需要手动给每个节点绑定click事件，所有状态变更都会自动触发同步逻辑，新展开的节点也能正常处理
不管是展开还是折叠操作，只要状态完成变更就会同步到localStorage，刷新页面后会完全恢复上次的操作状态
代码逻辑更简洁，没有多余的循环绑定和闭包问题

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