如何将点击切换状态的按钮状态保存至Local Storage？

要实现页面刷新后保持按钮的绿色/灰色状态，只需给现有代码添加LocalStorage的读写逻辑，将按钮状态以JSON格式存储在本地。以下是修改后的完整代码：

<body>
    <button id="b1">item 1</button>
    <button id="b2">item 2</button>
    <button id="b3">item 3</button>
    <button onclick="saveButtonStates()" id="Save">save</button>
    <script>
      var cList = ['#008000','#808080'];
      var butList = {}; // 改用对象存储，更适合按id索引
      const STORAGE_KEY = 'buttonStates'; // 本地存储的键名

      // 构造函数：初始化按钮事件与状态
      var ButExtend = function butObj(id, savedCount = 0) {
        this.count = savedCount;
        const btn = document.getElementById(id);
        if (btn) {
          btn.addEventListener('click', bClick, false);
          // 初始化时设置对应背景色
          btn.style.backgroundColor = cList[this.count];
        }
      };

      // 按钮点击事件：切换状态并保存
      function bClick() {
        // 先更新count再切换颜色
        butList[this.id].count++;
        if (butList[this.id].count >= cList.length) {
          butList[this.id].count = 0;
        }
        this.style.backgroundColor = cList[butList[this.id].count];
        // 自动保存状态
        saveButtonStates();
      }

      // 保存按钮状态到LocalStorage
      function saveButtonStates() {
        // 提取每个按钮的count值，转成JSON字符串存储
        const states = {};
        Object.keys(butList).forEach(id => {
          states[id] = butList[id].count;
        });
        localStorage.setItem(STORAGE_KEY, JSON.stringify(states));
      }

      // 从LocalStorage加载按钮状态
      function loadButtonStates() {
        const saved = localStorage.getItem(STORAGE_KEY);
        return saved ? JSON.parse(saved) : {};
      }

      window.onload = function() {
        const bId = ['b1','b2','b3'];
        const savedStates = loadButtonStates();
        // 遍历按钮数组初始化
        for (let i = 0; i < bId.length; i++) {
          const id = bId[i];
          butList[id] = new ButExtend(id, savedStates[id] || 0);
        }
      }
    </script>
</body>

关键改动说明： #

• 将butList从数组改为对象，更方便通过按钮id直接索引状态
• 新增STORAGE_KEY常量统一管理本地存储的键名，避免硬编码
• 新增saveButtonStates函数：将按钮状态转为JSON字符串存入LocalStorage（因为LocalStorage只能存储字符串）
• 新增loadButtonStates函数：页面加载时读取本地存储的状态，解析为对象后使用
• 修改ButExtend构造函数：初始化时直接根据保存的count设置按钮背景色
• 优化bClick函数：调整count更新和颜色切换的顺序，确保逻辑正确，点击后自动保存状态
• 用普通for循环遍历按钮数组，避免for...in可能带来的原型链遍历问题
• 保留手动保存按钮的功能，点击后触发状态保存

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