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个场景。

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

2,3的情况相同，您需要将其保存在服务器中。

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

建议学习：客户端：AJAX（Jquery），服务器端：REST API，DB（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计数器永久保留计数数？

3 个答案: