页面刷新后Show/Hide Div状态重置及功能优化技术求助

问题1：页面刷新后状态重置的修复 #

原代码对localStorage的处理存在两处错误：

• 没必要用JSON.stringify()包裹localStorage.getItem()的结果，localStorage本身存储的就是字符串，额外序列化会导致判断逻辑失效
• 判断条件逻辑错误，当localStorage中无对应值时，getItem()返回null，直接和'none'、null比较即可，无需转成JSON字符串

同时页面初始化时，不仅要恢复div的显示状态，还要同步更新对应按钮的文本，避免状态不一致。

问题2：按钮文本切换异常的修复 #

需要在hideandshow函数中，根据目标div的显示状态动态切换按钮文本。可以给按钮添加data-target属性关联对应的div，方便快速查找匹配元素。

修改后的完整代码 #

HTML代码

<button type="button" onclick="hideandshow('spoiler1')" data-target="spoiler1">Show Section 1</button>
  
<div id="spoiler1" style="display:none">
        This is the hidden text SECTION-1! <br>
        <form action="mainpage.jsp" method="POST">
            <button type="submit">RELOAD PAGE SECTION-1</button> 
    </form>
</div> <br><br>
<!-- Section 2 -->
<button type="button" onclick="hideandshow('spoiler2')" data-target="spoiler2">Show Section 2</button>
  
<div id="spoiler2" style="display:none">
    This is the hidden text SECTION-2!
    <form action="mainpage.jsp" method="POST">
        <button type="submit">RELOAD PAGE SECTION-2</button> 
    </form>
</div> <br><br>
<!-- Section 3 -->
<button type="button" onclick="hideandshow('spoiler3')" data-target="spoiler3">Show Section 3</button>
  
<div id="spoiler3" style="display:none">
    This is the hidden text SECTION-3!
    <form action="mainpage.jsp" method="POST">
        <button type="submit">RELOAD PAGE SECTION-3</button> 
    </form>
</div>

JavaScript代码

// 页面初始化时恢复状态
const activeSpoiler = localStorage.getItem('activespoiler');
// 所有spoiler的id集合
const allSpoilers = ['spoiler1', 'spoiler2', 'spoiler3'];

if (activeSpoiler && activeSpoiler !== 'none') {
    // 显示保存的active spoiler
    document.getElementById(activeSpoiler).style.display = 'block';
    // 更新对应按钮文本为Hide
    const targetButton = document.querySelector(`button[data-target="${activeSpoiler}"]`);
    if (targetButton) {
        targetButton.textContent = `Hide Section ${activeSpoiler.slice(-1)}`;
    }
}

// Show/hide div content defined by id (spoiler1, spoiler2, spoiler3)
function hideandshow(spoiler) {
    const targetDiv = document.getElementById(spoiler);
    const targetButton = document.querySelector(`button[data-target="${spoiler}"]`);
    const isHidden = targetDiv.style.display === 'none';

    if (isHidden) {
        // 显示当前div
        targetDiv.style.display = 'block';
        localStorage.setItem('activespoiler', spoiler);
        // 更新按钮文本
        targetButton.textContent = `Hide Section ${spoiler.slice(-1)}`;

        // 隐藏其他所有div并同步按钮文本
        allSpoilers.forEach(id => {
            if (id !== spoiler) {
                const otherDiv = document.getElementById(id);
                otherDiv.style.display = 'none';
                const otherButton = document.querySelector(`button[data-target="${id}"]`);
                otherButton.textContent = `Show Section ${id.slice(-1)}`;
            }
        });
    } else {
        // 隐藏当前div
        targetDiv.style.display = 'none';
        localStorage.setItem('activespoiler', 'none');
        // 更新按钮文本
        targetButton.textContent = `Show Section ${spoiler.slice(-1)}`;
    }
}

关键修改点说明 #

1. localStorage处理优化：

   • 直接获取localStorage.getItem('activespoiler')的结果，去掉冗余的JSON.stringify操作
   • 初始化时同时恢复div状态和按钮文本，保证页面状态统一

2. 按钮文本切换实现：

   • 给按钮添加data-target属性，通过该属性快速关联对应的div元素
   • 在hideandshow函数中，根据div的显示状态动态设置按钮文本为Show Section X或Hide Section X
   • 使用循环处理其他div的隐藏和按钮文本更新，替代原代码中冗余的else-if判断，提升代码可维护性

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