使用jQuery slideToggle()实现元素切换并在页面刷新时保留状态的问题

嘿，这个需求很好解决！我们可以利用浏览器的本地存储功能（localStorage）来保存切换状态，这样页面刷新后就能自动恢复之前的显示/隐藏状态啦。下面是具体的实现方案：

核心思路 #

把#about-user-widget的显示状态（显示/隐藏）存在浏览器的localStorage里，页面初始化时读取这个值来设置元素的初始状态，每次触发切换操作时同步更新存储的状态值。

完整代码实现 #

$(document).ready(function() {
    // 从本地存储读取状态，默认设为显示（如果没有存储记录的话）
    const isWidgetVisible = localStorage.getItem('aboutUserWidgetVisible') !== 'false';
    
    // 根据存储的状态设置初始显示效果
    if (isWidgetVisible) {
        $('#about-user-widget').show();
        $('#show-button').hide();
    } else {
        $('#about-user-widget').hide();
        $('#show-button').attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: block;');
    }

    // 隐藏widget的按钮点击事件
    $("#about-user-widget .hide-btn").click(function(){
        $("#about-user-widget").slideToggle();
        $("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: block;');
        // 更新本地存储：标记widget为隐藏状态
        localStorage.setItem('aboutUserWidgetVisible', 'false');
    });

    // 显示widget的按钮点击事件
    $("#show-button").click(function(){
        $("#about-user-widget").slideToggle();
        $("#show-button").hide();
        // 更新本地存储：标记widget为显示状态
        localStorage.setItem('aboutUserWidgetVisible', 'true');
    });
});

关键细节说明 #

• 初始化逻辑：页面加载时先检查localStorage里的aboutUserWidgetVisible值，没有记录的话默认让widget显示，符合用户首次访问的预期。
• 状态同步：每次点击按钮切换状态后，立刻把当前的状态（'true'表示显示，'false'表示隐藏）存入localStorage，确保刷新页面时能读取到最新状态。
• 会话级存储可选：如果你希望状态只在当前浏览器会话有效（关闭浏览器后自动重置），直接把代码里的localStorage换成sessionStorage就可以，用法完全一致。

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