使用本地存储设置按钮点击、存储值和刷新时显示值的限制

Question

我在同一类的页面上有多个按钮，我尝试设置 3 次单击的限制，并在按钮上单击 3 次后显示“最大选择”文本。

如果访问者返回页面，我希望保存这些值并仍然显示。

目前重置功能会将计数器重置回 0，但之后我可以选择 3 个以上的选项，并且计数器会超过 3，我希望 3 成为限制。

JSFiddle：https://jsfiddle.net/80rhzjwq

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>

JS

/ This function increases the count
const boxes = Array.from(document.getElementsByClassName('box'));
 let one = 0;
boxes.forEach(box => {
  box.addEventListener('click', function clickButtonFunction() {

  console.log('run');

  //Check to see if the localstorage variable exists. If it does not, this is the first time coming to the page, and we need to initalize it to 0
  if (localStorage.getItem("clickCounter") === null) {
    // Store
    localStorage.setItem("clickCounter", "0");
  }

  // Get the value from local storage
  var value = parseInt(localStorage.getItem("clickCounter"));

  // Incrememtnt the count by 1
  var newValue = value + 1

  //Write the value back to local storage
  localStorage.setItem("clickCounter", newValue);



  // Write the value to the div
  document.getElementById("clickCounter").innerHTML = newValue

 one += 1;
    if (one === 3){
   document.querySelectorAll('.box').forEach(elem => {
  elem.disabled = true;
  document.getElementById("clickCounter").innerHTML = 'MAXIMUM SELECTION'
});

    }

}

);
});

// Reset local storage to 0
function clickReset() {

  localStorage.setItem("clickCounter", "0");
  // Write the value to the div
  document.getElementById("clickCounter").innerHTML = '0'
  {
   document.querySelectorAll('.box').forEach(elem => {
  elem.disabled = false;
  
});

    }


}

Answer 1

这是一个更简单且有效的解决方案

注意我从按钮容器委托

https://jsfiddle.net/mplungjan/wzmh08ek/

window.addEventListener("DOMContentLoaded", () => {
  const max = 3;
  let clickCounterValue = +localStorage.getItem("clickCounter"); // value or 0
  const clickCounter = document.getElementById("clickCounter")
  const boxContainer = document.getElementById("boxContainer");
  const boxes = boxContainer.querySelectorAll(".box");
  const msg = document.getElementById("msg");
  const resetButton = document.querySelector(".reset");
  const show = () => {
    const maxReached = clickCounterValue >= max;
    clickCounter.textContent = maxReached ? "Maximum reached" : clickCounterValue;
    boxes.forEach(elem => {
      elem.disabled = maxReached;
    });
    msg.hidden = !maxReached;
  };
  show();

  // This function increases the count
  boxContainer.addEventListener('click', (e) => {
    const tgt = e.target.closest(".box");
    if (!tgt) return; 
    // Increment the count by 1
    clickCounterValue++;
    localStorage.setItem("clickCounter", clickCounterValue);
    show();
  });

  // Reset local storage to 0
  resetButton.addEventListener("click", () => {
    localStorage.setItem("clickCounter", 0);
    // Write the value to the div
    clickCounterValue = clickCounter.textContent = 0;
    show();
  });
});

<div id="boxContainer">
  <button class="box">CLICKS: </button>
  <button class="box">CLICKS: </button>
  <button class="box">CLICKS: </button>
</div>
<p>SELECTION COUNTER:</p>
<div id="clickCounter"></div>
<div id="msg" hidden>Max message</div>


<button class="reset">Reset count</button>