如何在 HTML/CSS 中制作计数器答案

【问题标题】：How can I make a counter in HTML/CSS如何在 HTML/CSS 中制作计数器
【发布时间】：2021-06-09 12:24:59
【问题描述】：

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

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

【问题讨论】：

我认为你需要一个数据库。
您可以将值存储在 Cookie 或 localStorage 中
看看这是否有帮助：stackoverflow.com/questions/2010892/…
可以使用localStorage
本地存储和 cookie 在这里不起作用。这个问题询问“ANYONE 点击了多少次”。这意味着他们需要一个允许在多个用户之间共享数据的答案。

标签： javascript html counter

【解决方案1】：

您不能仅使用基于浏览器的 javascript 来做到这一点。您的网站是在客户端上执行的，无法直接与其他客户端通信。如果您想在客户端 javascript 中包含客户端无法使用的任何信息（例如还有谁在访问该网站），那么您需要从服务器请求该信息。

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

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

【讨论】：

感谢您的回复，我会尝试自己研究

【解决方案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>

【讨论】：

@DarkZero 不过，它不会为多个用户工作。它被称为“本地存储”，因为它对用户及其设备是本地的。您需要的是某种“服务器存储”。但是标准的 javascript API 中没有这样的东西。
我知道，但这对我来说是一个很好的垫脚石，我尝试搜索更多相关的文档和教程，对本地存储和会话存储有了基本的了解。现在尝试检查 sql 和 php