javascript - 使用 javascript 的实时点击计数器？

Question

我的网站上有一个条形图，用于计算用户点击 1、2、3、4 或 5 星的次数，由以下代码给出:

function enlargeStars(x) {
  if(x === 0) { return; }
  starId = "star" + x;
  document.getElementById(starId).style.width = "60px";
  enlargeStars(x-1);
}
 function shrinkStars(x) {
   if(x === 0) { return; }
   starId = "star" + x;
   document.getElementById(starId).style.width = "50px";
   shrinkStars(x-1);
 }

let fiveStarCounter = parseInt(document.getElementById("c5").innerHTML);
let star5 = document.getElementById("star5");
star5.onclick = () => {
  fiveStarCounter++;
  document.getElementById("c5").innerHTML = fiveStarCounter;
  updateBars();
}

let fourStarCounter = parseInt(document.getElementById("c4").innerHTML);
let star4 = document.getElementById("star4");
star4.onclick = () => {
  fourStarCounter++;
  document.getElementById("c4").innerHTML = fourStarCounter;
  updateBars();
}

let threeStarCounter = parseInt(document.getElementById("c3").innerHTML);
let star3 = document.getElementById("star3");
star3.onclick = () => {
  threeStarCounter++;
  document.getElementById("c3").innerHTML = threeStarCounter;
  updateBars();
}

let twoStarCounter = parseInt(document.getElementById("c2").innerHTML);
let star2 = document.getElementById("star2");
star2.onclick = () => {
  twoStarCounter++;
  document.getElementById("c2").innerHTML = twoStarCounter;
  updateBars();
}

let oneStarCounter = parseInt(document.getElementById("c1").innerHTML);
let star1 = document.getElementById("star1");
star1.onclick = () => {
  oneStarCounter++;
  document.getElementById("c1").innerHTML = oneStarCounter;
  updateBars();
}

function updateBars() {
  let total = fiveStarCounter+fourStarCounter+threeStarCounter+twoStarCounter+oneStarCounter;
  let bar1height = Math.round((oneStarCounter/total)*100);
  document.getElementById("bar1").style.height = bar1height+"%";
  let bar2height = Math.round((twoStarCounter/total)*100);
  document.getElementById("bar2").style.height = bar2height+"%";
  let bar3height = Math.round((threeStarCounter/total)*100);
  document.getElementById("bar3").style.height = bar3height+"%";
  let bar4height = Math.round((fourStarCounter/total)*100);
  document.getElementById("bar4").style.height = bar4height+"%";
  let bar5height = Math.round((fiveStarCounter/total)*100);
  document.getElementById("bar5").style.height = bar5height+"%";
}

.ratings-container {
  /*background-color: red;*/
  font-family: tahoma;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

.graph-container {
  /*background-color: blue;*/
}

.graph {
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 300px;
  width: 66%;
}

.graph div {
  width: 12%;
  height: 1px;
  background-color: black;
}

.counters {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 66%;
}

.label-container {
  width: 64%;
  background-color: green;
}

#fivestar {
  float: left;
  /*display: inline;*/
}

#onestar {
  float: right;
  /*display: inline;*/
}

.star-container {
  width: 66%;
  /*background-color: blue;*/
  margin-top: 100px;
  font-size: 0;
}

.star {
  width: 50px;
  height: auto;
  cursor: pointer;
}

<div class="ratings-container">
    <h3>RATE YOUR STAY</h3>
    <div class="graph-container">
      <div class="graph">
        <div id="bar5"></div>
        <div id="bar4"></div>
        <div id="bar3"></div>
        <div id="bar2"></div>
        <div id="bar1"></div>
      </div>
      <div class="counters">
        <h3 id="c5">0</h3>
        <h3 id="c4">0</h3>
        <h3 id="c3">0</h3>
        <h3 id="c2">0</h3>
        <h3 id="c1">0</h3>
      </div>
      <div class="label-container">
        <h2 id="fivestar">5 star</h2>
        <h2 id="onestar">1 star</h2>
      </div>
    </div>
     <div class="star-container">
      <img onmouseout="shrinkStars(1)" onmouseover="enlargeStars(1)" class="star" id="star1" src="./star.jpg">
      <img onmouseout="shrinkStars(2)" onmouseover="enlargeStars(2)" class="star" id="star2" src="./star.jpg">
      <img onmouseout="shrinkStars(3)" onmouseover="enlargeStars(3)" class="star" id="star3" src="./star.jpg">
      <img onmouseout="shrinkStars(4)" onmouseover="enlargeStars(4)" class="star" id="star4" src="./star.jpg">
      <img onmouseout="shrinkStars(5)" onmouseover="enlargeStars(5)" class="star" id="star5" src="./star.jpg">
    </div>
  </div>

因此，每次点击一颗星时，相关栏的计数都会更新。对计数求和，每个条的百分比由 barXcount/total 计算，并将此百分比作为高度。但是，每次用户打开页面时，每个栏的计数器都会刷新。如何让这些计数器“生效”？

Answer 1

如果您想保留数据以便在用户重新访问该页面时显示，那么您需要将该数据存储在某个地方。 HTML 5 使我们能够访问 webstorage API，您可以通过它在客户端计算机中存储数据。例如，

function updateBars() {
  let total = fiveStarCounter + fourStarCounter + threeStarCounter + twoStarCounter + oneStarCounter;
  localStorage.setItem("total", total);


  let bar1height = Math.round((oneStarCounter / total) * 100);
  document.getElementById("bar1").style.height = bar1height + "%";
  localStorage.setItem("bar1", bar1height + "%");

  //replicate for other bars

}

//call this function on page load
function onPageLoad() {
  var total = localStorage.getItem("total");
  if (total != null) {
    document.getElementById("bar1").style.height = localStorage.getItem("bar1");
  }

  //replicate this for other bars

}

在这里，每当计算数据时，我们都会在 localStorage 中设置值。在页面加载时，我们从 localStorage 检索数据并将其显示在屏幕上。您可以在这里阅读更多相关信息:https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage