localStorage存储多个独立项的最佳方法及多按钮显隐状态持久化实现

核心优化思路是通过通用规则复用逻辑，不需要为每个按钮单独写样式、事件函数、状态存储逻辑：

• 用自定义属性data-toggle-target关联按钮和对应的受控文本，仅需一套代码支持任意数量的独立开关
• 用通用类统一定义隐藏样式，不需要为每个受控元素单独写CSS规则
• localStorage 存储键用受控元素ID做后缀，保证多个开关的状态互不干扰

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多开关独立控制</title>
    <style>
        /* 通用隐藏类，所有受控文本加这个类即可，不用单独写样式 */
        .toggle-content {
            display: none;
            margin: 12px 0;
        }
        button {
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <!-- 第一个开关组 -->
    <button data-toggle-target="text1">开关1</button>
    <span id="text1" class="toggle-content">隐藏文本1</span>
    <br><br>

    <!-- 第二个开关组 -->
    <button data-toggle-target="text2">开关2</button>
    <span id="text2" class="toggle-content">隐藏文本2</span>
    <br><br>

    <!-- 后续要加多少个就复制上面的结构，修改data-toggle-target和对应id即可，不用改CSS和JS -->
    <button data-toggle-target="text3">开关3</button>
    <span id="text3" class="toggle-content">隐藏文本3</span>
    <br><br>
    <button data-toggle-target="text4">开关4</button>
    <span id="text4" class="toggle-content">隐藏文本4</span>
    <br><br>
    <button data-toggle-target="text5">开关5</button>
    <span id="text5" class="toggle-content">隐藏文本5</span>
    <br><br>
    <button data-toggle-target="text6">开关6</button>
    <span id="text6" class="toggle-content">隐藏文本6</span>
    <br><br>
    <button data-toggle-target="text7">开关7</button>
    <span id="text7" class="toggle-content">隐藏文本7</span>
    <br><br>
    <button data-toggle-target="text8">开关8</button>
    <span id="text8" class="toggle-content">隐藏文本8</span>
    <br><br>
    <button data-toggle-target="text9">开关9</button>
    <span id="text9" class="toggle-content">隐藏文本9</span>
    <br><br>
    <button data-toggle-target="text10">开关10</button>
    <span id="text10" class="toggle-content">隐藏文本10</span>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有控制开关
            const toggleButtons = document.querySelectorAll('[data-toggle-target]');
            
            toggleButtons.forEach(btn => {
                const targetId = btn.dataset.toggleTarget;
                const targetElement = document.getElementById(targetId);
                if (!targetElement) return;

                // 页面加载时恢复之前存储的状态
                const savedDisplay = localStorage.getItem(`conceal_${targetId}`);
                if (savedDisplay === 'block') {
                    targetElement.style.display = 'block';
                }

                // 绑定切换逻辑
                btn.addEventListener('click', () => {
                    const newDisplay = targetElement.style.display === 'block' ? 'none' : 'block';
                    targetElement.style.display = newDisplay;
                    localStorage.setItem(`conceal_${targetId}`, newDisplay);
                });
            });
        });
    </script>
</body>
</html>

代码说明 #

所有逻辑通用，新增开关只需要新增HTML结构即可，不需要修改其他部分：

1. 按钮新增data-toggle-target属性，属性值填要控制的文本元素的ID
2. 要控制的文本元素加toggle-content类，设置对应的ID即可
3. 每个开关的状态独立存储在localStorage，刷新页面不会丢失，互不影响

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