0

我正在尝试在我的 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，等等。

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

4

3 回答 3

0

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

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

网络版 Firebase 实时数据库入门

于 2019-05-14T04:57:21.057 回答
0

正如我所了解的你想要保留用户点击次数的问题，有 3 个场景

  1. 用户访问形式 单机 单浏览器（很少见）在此可以使用本地存储
  2. 用户访问表单 单机多浏览器 在这种情况下，您必须将其保存在服务器端
  3. 用户访问来自多机多浏览器这种情况下你必须将其保存在服务器端

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

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

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

于 2019-05-14T05:09:36.910 回答
0

根据您的需要，您可以使用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);
};

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

于 2019-05-14T05:22:37.583 回答