如何实现点击Accordion时保存状态，页面刷新后保留最后展开项？

你的现有代码存在拼写错误和逻辑问题，导致无法正确保存和恢复手风琴状态，以下是修正后的完整实现：

原代码问题点 #

• localstorage 应为驼峰式的 localStorage（浏览器API标准拼写）
• toggleclass 应为 toggleClass（jQuery方法标准拼写）
• 读取状态时错误地对所有手风琴内容执行slideToggle，无法精准定位到之前打开的项
• 未处理手风琴关闭场景，关闭后刷新仍会错误展开

修正后的代码 #

$(document).ready(function(){
    /* 读取本地存储的手风琴激活状态 */
    const activeAccordionIndex = localStorage.getItem('accordion-active');
    if (activeAccordionIndex !== null) {
        // 定位到对应索引的手风琴，恢复激活状态和展开状态
        const $targetHeader = $('.accordion-header').eq(activeAccordionIndex);
        $targetHeader.parent().addClass('active');
        $targetHeader.parent().children('.accordion-body').slideDown();
    }

    /* 手风琴点击事件处理 */
    $(".accordion-header").click(function(){
        const $parentItem = $(this).parent();
        const wasActive = $parentItem.hasClass('active');
        
        // 切换当前手风琴的激活样式和内容展开状态
        $parentItem.toggleClass('active');
        $parentItem.children('.accordion-body').slideToggle();

        // 根据当前状态更新本地存储
        if (wasActive) {
            // 手风琴从激活变为关闭，移除存储的状态
            localStorage.removeItem('accordion-active');
        } else {
            // 手风琴从未激活变为打开，保存当前索引
            localStorage.setItem('accordion-active', $(this).index(".accordion-header"));
        }
    })
})

关键逻辑说明 #

1. 状态恢复：页面加载时读取localStorage中保存的索引，通过eq()精准定位到对应的手风琴项，直接添加激活类并展开内容，避免全局切换的错误。
2. 状态更新：点击手风琴时，先判断当前项原本的激活状态：
   • 如果是关闭操作（原本已激活），则移除localStorage中的记录
   • 如果是打开操作（原本未激活），则将当前项的索引存入localStorage
3. 拼写规范：严格遵循浏览器API和jQuery方法的标准拼写，确保代码能正常执行。

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