Question

我试图找到一种方法来跟踪网站上按下按钮的次数。

它到目前为止工作，但每次用户刷新网站时都会重置。

有没有办法阻止它重置？

以下是我所拥有的：

<button onclick="Test()" id="counter">Check</button>
<p>This program has been run <span id="displayCount">0</span> times.</p>

<script type="text/javascript">
      var count = 0;
      var button = document.getElementById("counter");
      var display = document.getElementById("displayCount");

      button.onclick = function(){
        Test()
        count++;
        display.innerHTML = count;
      }
    </script>

Answer 1

如果要在客户端维护计数，请尝试使用localstorage： -

<script type="text/javascript">
  var count;
  var button = document.getElementById("counter");
  var display = document.getElementById("displayCount");
   if( window.localStorage.getItem('clickCount')){
     count =  window.localStorage.getItem('clickCount');
   }else{
      count = 0;
    }
   display.innerHTML = count;
  button.onclick = function(){
    Test()
    count++;
     window.localStorage.setItem('clickCount',count);
    display.innerHTML = count;
  }
</script>

但如果有类似的话，如果一个用户点击，则会为每个用户更新点击计数器，或者如果用户在单独的浏览器或设备中打开网站，计数器将是相同的，那么您必须将计数器发送到服务器

Answer 2

您可以使用会话/本地存储来存储计数。检查以下存储按钮点击次数的示例 http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_session

Answer 3

您可以使用websockets在页面上为所有用户保持在线更新数据，这可以为所有在线用户提供多少次点击按钮，在页面加载后计算。例如：我加载页面，单击2次，所以如果你现在加载页面，你会看到0，如果你在页面，你可以看到2.多数美妙的技术我在Facebook有一个名为Aplicativo Desenhe的应用程序，使用它。

但是。为了保存所有用户的所有点击，您需要将其保存到服务器，可以使用例如平面文件数据库或TXT文件来保存数据。所以每次有人点击，您运行一个函数在平面文件中发布+1。这可能会让很多用户失败，所以最好使用sql，这样你就可以更好地保存所有数据。

需要更好地定义需求。如果您只想计算用户的点击次数并为该用户显示，则可以使用localstorage或cookies，但这显然只能显示该会话，浏览器，设备等。

我在游戏中使用Facebook API测试了它，它有一个计数器，所有用户都需要点击，获得积分，所以你可以看到所有朋友的点击，实时更新，在排行榜上，是真棒!!!!!!!它被称为Social CLicker，我现在不知道代码在哪里。

Facebook API可以使用分数计算，你也可以使用它，也许，我不知道。

我希望这会有所帮助。

单击“HTML按钮计数器”

3 个答案: