如何让一个 JS 计数器永久保留计数的数量？答案

【问题标题】：How to make a JS counter permanently retain the number of counts?如何让一个 JS 计数器永久保留计数的数量？
【发布时间】：2019-05-14 04:48:48
【问题描述】：

我正在尝试在我的 tumblr 上创建一个页面，该页面上有一个按钮，该按钮会计算它被按下的次数。我已经让它工作了，但是浏览器关闭或刷新会清除该值，并且来自不同人的点击不会叠加。这是我所拥有的：

<body>
  <div class="main">

    <h3>Click Counter</h3>
    <button id="clickme">Click me: 0</button>

    <h5>Filler Text</h5>

  </div>
  <script>
    var button = document.getElementById("clickme"),
        count = 0;
        
    button.onclick = function() {
      count += 1;
      button.innerHTML = "Click me: " + count;
    };
  </script>
</body>

这会使按钮在按下时计数，但我希望它的行为如下：

用户 #1 点击两次。计数器读数为 2。

用户 #2 访问页面，计数器已经是 2，用户点击了 3 次。计数器在 5。

用户 #3 访问，他们的计数器仍然为 5，等等。

截至目前，每个用户都访问了该页面，并且该值从零开始。帮忙？

【问题讨论】：

您需要将点击保存在后端。你有可以做到这一点的后端吗？
@CertainPerformance 我正在尝试让它在 tumblr 页面上运行，因此我不必自己托管任何文件。我是否必须使用某种 PHP 服务器进行设置？
PHP、Node 或其他任何东西，这样您就可以保存当前计数并执行所需的编程逻辑。如果你不能充分改变 Tumblr 响应，你可以在其他（非 Tumblr）服务器上调用你自己的外部 API，你有可以使用的 API 吗？
我没有。 tumblr 页面完全是前端，但是是否可以以这种方式使用另一个 tumblr 页面？如果没有，我想我只需要设置自己的后端？
@KeithO'Donnell 您可以使用 google firebase 来保存计数。

标签： javascript html tumblr-html

【解决方案1】：

javascript 在浏览器上运行并将所有变量存储在浏览器中，因此变量的范围在浏览器中。您可以使用本地存储，但如果所有用户都使用同一个浏览器，这不是您的需要，因此保留数据的唯一方法是将计数（数据）保存到服务器并在页面加载时获取计数（数据）。

如果你没有任何服务器，你可以使用firebase real-time database。

Getting started with Firebase real-time database for the web

【讨论】：

听起来好像可以解决问题 - 我该如何设置？我几乎不知道如何使用它或如何将它链接到我的页面。
查看答案中添加的中等教程

【解决方案2】：

据我了解，您想要保留用户点击次数的问题，有 3 个场景

用户访问表单单机单浏览器（罕见情况）在这里你可以使用本地存储
用户访问表单单机多浏览器在这种情况下，您必须将其保存在服务器端
用户访问表单多机多浏览器在这种情况下，您必须将其保存在服务器端

两种情况2,3相同，需要保存在服务器中。

执行此操作的常用方法是将您的计数器放在 db 和一个 REST 端点中，并在每个页面加载页面上调用该端点以从服务器中获取计数器，并在通过类似端点单击服务器上的更新后调用该端点

建议学习：客户端：AJAX（Jquery），服务器端：REST API，DB（MySql，ets）

【讨论】：

【解决方案3】：

根据您的需要，您可以使用localStorage。

count = localStorage.getItem('count');
count = parseInt(count); // because localstorage stores everything in strings

// First time the value does not exist...
if(count == null) {
  count = 0; 
}

button.onclick = function() {
  count += 1;
  button.innerHTML = "Click me: " + count;
  localstorage.setItem("count", count);
};

这不是服务器端解决方案。它也不太可靠，因为它可以由用户随时清除。

【讨论】：