多按钮点击3次限制及localStorage持久化重置问题修复

问题根源 #

原代码同时使用全局变量one和localStorage维护计数，两者未同步：

• 重置操作仅清空localStorage，未重置one，导致重置后one仍保留历史值，点击时持续累加且不触发禁用逻辑，突破3次限制。
• 页面刷新后one被重置为0，但localStorage计数仍存在，造成计数逻辑混乱。

修复思路 #

1. 移除全局变量one，完全依赖localStorage管理计数，确保持久化状态与逻辑判断一致。
2. 每次点击前先检查当前计数是否已达3，若已达到则直接终止操作。
3. 页面初始化时读取localStorage，根据已有状态设置按钮禁用状态和显示内容。

修改后的代码 #

HTML（无需改动）

<button class="box">CLICKS: </button>
<button class="box">CLICKS: </button>
<button class="box">CLICKS: </button>

<p>SELECTION COUNTER:</p><div id='clickCounter'></div>

<button class='reset' onclick="clickReset()">Reset count</button>

JavaScript

const boxes = Array.from(document.getElementsByClassName('box'));
const counterEl = document.getElementById('clickCounter');

// 页面初始化时加载存储的状态
function initState() {
  let count = parseInt(localStorage.getItem("clickCounter")) || 0;
  counterEl.innerHTML = count >= 3 ? 'MAXIMUM SELECTION' : count;
  // 根据计数设置按钮状态
  boxes.forEach(box => {
    box.disabled = count >= 3;
  });
}

// 初始化状态
initState();

boxes.forEach(box => {
  box.addEventListener('click', function() {
    let count = parseInt(localStorage.getItem("clickCounter")) || 0;
    // 已达上限则不执行后续操作
    if (count >= 3) return;
    
    count += 1;
    localStorage.setItem("clickCounter", count);
    
    if (count === 3) {
      counterEl.innerHTML = 'MAXIMUM SELECTION';
      boxes.forEach(elem => elem.disabled = true);
    } else {
      counterEl.innerHTML = count;
    }
  });
});

// 重置函数
function clickReset() {
  localStorage.setItem("clickCounter", "0");
  counterEl.innerHTML = '0';
  boxes.forEach(elem => {
    elem.disabled = false;
  });
}

关键改动说明 #

• 新增initState函数：页面加载时读取localStorage，初始化计数器显示和按钮状态，确保返回页面时状态正确。
• 移除全局变量one，所有计数操作直接基于localStorage的值，避免状态不一致。
• 点击事件中先判断当前计数是否已达3，若已达到则直接返回，阻止继续累加。
• 重置函数仅需处理localStorage、显示内容和按钮状态，无需额外维护全局变量。

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