我怎样才能在 HTML/CSS 中制作一个计数器

Question

所以我制作了一个按钮，用来记录任何人点击了多少次，就像一个总点击计数器。但是我遇到一个问题，当我重新加载页面时，它会重置回 0。我想确保它会计算每个人的点击并保存

  <script>
    let num = 0;
    function myFunction() {
    document.getElementById("num").textContent = ++num;
  }
  </script>
  
  <button class="button" onclick="myFunction()">
  <p id="num"></p>

Answer 1

您无法单独使用基于浏览器的 javascript 来做到这一点。您的网站是在客户端执行的，没有直接与其他客户端通信的方式。如果您想在客户端 javascript 中获取客户端不可用的任何信息（例如其他人正在访问该网站），那么您需要从服务器请求该信息。

这意味着您需要某种形式的服务器端编程来记录和计算页面访问，将数量存储在服务器上并将该数量嵌入到正在交付的 HTML 文档中。

服务器端 Web 开发的技术选择数不胜数。即使只是列出您拥有的所有选项也会使这个答案太长。所以我不会给你任何特定技术的例子。进行自己的研究以大致了解可供您使用的技术选项，然后决定您想学习哪一种。如果您不确定如何在您选择的技术中做到这一点，请随时提出新问题。

Answer 2

您可以将当前状态保存到本地存储

像这样

 <script>
    let num = localStorage.getItem("counter");
    function myFunction() {
    document.getElementById("num").textContent = ++num;
    localStorage.setItem("counter", document.getElementById("num").textContent);

  }
  </script>
  
  <button class="button" onclick="myFunction()">
  <p id="num"></p>

我怎样才能在 HTML/CSS 中制作一个计数器

How can I make a counter in HTML/CSS

html

javascript

counter