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

Question

我正在尝试在我的 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 访问了该页面，计数器已经是二，用户点击了 3 次。计数器在 5。

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

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

Answer 1

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

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

Getting started with Firebase real-time database for the web

Answer 2

根据你的问题，我了解到你想保留用户点击次数，所以有 3 个场景

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

case 2,3相同，需要保存到服务器

一种常见的方法是，将计数器放在数据库中和一个 REST 端点，并在每次加载页面时在页面上调用该端点，以从服务器获取计数器，并在通过类似端点在服务器上单击更新后调用该端点

建议学习：客户端：AJAX (Jquery)，服务器端：REST API，数据库(MySql,ets)

Answer 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);
};

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

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

How to make a JS counter permanently retain the number of counts?

javascript

html

tumblr-html