Question

我需要创建一个点击计数器，当刷新页面时，该值不会重置。我还需要它来自所有用户的所有点击的高潮，而不仅仅是一个用户。因此，它基本上是一个大点击计数器。这是我的代码，但我对我正在做的事情并不了解。

    <!DOCTYPEhtml>
 <html>
 <head>
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 </head>
 <body>
 Clicks:<span id="numClicked"></span><br>
 <button id="button">Click</button>
 </body>
 </html>
 <script type="text/javascript">
 $('#button').click(function(){

       $.ajax({
          url: "saveCounter.php",
          type: "POST",
          data: {
             "action" : "increment"
          }
         }).success(function(data){
              $('#numClicked').html(data);
         }).error(function(){

         });

       });

    $(document).ready(function() {
      $.ajax({
          url: "saveCounter.php",
          type: "POST",
          data: {
             "action" : "get"
          }
       }).success(function(data){

           $('#numClicked').html(data);

       }).error(function(){

       });

});
</script>
<?php
if (!isset(GLOBALS["value"])
{
  $GLOBALS["value"] = 0;
}

$action = filter_input(INPUT_POST, "action", FILTER_UNSAFE_RAW);

if ($action !== null)
{
  if ($action == "increment")
  {
     $GLOBALS["value"] += 1;
  }

  echo $GLOBALS["value"];

}
?>

Answer 1

由于您只标记了javascript和html，我假设您希望使用纯javascript执行此操作，并且您无法访问服务器语言或存储来实现此功能。由于您只是跟踪点击次数，因此这可能是一个可行的解决方案。如果是这样，您可以使用localStorage，这样您就可以在用户的浏览器中存储一些信息，以便在刷新和浏览器会话中保留这些信息。但是，如果用户知道如何重置，他们可以清除此值。

演示：http://jsfiddle.net/f5VG8/6/

<强> HTML：

<button type="button" id="clickButton">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>

<强>使用Javascript：

var clicks = 0;

function initiateClicks() {
    var clickStr = localStorage.getItem("clicks");
    if(clickStr == undefined){
        localStorage.setItem("clicks", 0);
        clicks = 0;
    }else{
        clicks = parseInt(clickStr);   
    }
    document.getElementById("clicks").innerHTML = clicks;
}

function doClick() {
    clicks += 1;
    localStorage.setItem("clicks", clicks);
    document.getElementById("clicks").innerHTML = clicks;
}

document.getElementById("clickButton").onclick = doClick;
initiateClicks();

这样做是在页面加载时从用户的浏览器加载点击值，并在每次用户点击时写入。当用户刷新或退出浏览器，然后稍后重新访问您的页面时，如果用户未清除您设置的localStorage值，则会保留其点击次数。另外，我相信localStorage只能在现代浏览器中使用。

试一试：http://jsfiddle.net/f5VG8/6/

Answer 2

您需要保存服务器或Cookie中的点击次数

解决方案1 

要求AJAX请求动态保存服务器上的点击量
将之前保存的值加载到服务器上

<强>的Javascript

    $('#buttonID').click(function(){

       $.ajax({
          url: "saveCounter.php",
          type: "POST",
          data: {
             "action" : "increment"
          }
         }).success(function(data){
              $('#numberOfClickContainerID').html(data);
         }).error(function(){

         });

       });

    $(document).ready(function() {
      $.ajax({
          url: "saveCounter.php",
          type: "POST",
          data: {
             "action" : "get"
          }
       }).success(function(data){

           $('#numberOfClickContainerID').html(data);

       }).error(function(){

       });

});

<强> PHP

if (!isset(GLOBALS["value"])
{
  $GLOBALS["value"] = 0;
}

$action = filter_input(INPUT_POST, "action", FILTER_UNSAFE_RAW);

if ($action !== null)
{
  if ($action == "increment")
  {
     $GLOBALS["value"] += 1;
  }

  echo $GLOBALS["value"];

}

一切如何运作？

在页面加载（ $（document）.ready（））时，我们动态调用带有特定参数的php页面名称saveCounter.php，以获取服务器上保存的可用点击量
我们对按钮点击进行了一些操作。当用户点击时，我们动态调用saveCounter.php来增加计数器值并检索新值。

解决方案2

根据this教程

Answer 3

您可以使用html5 localStorage。

这个类似的例子在w3的网页上：http://www.w3schools.com/html/html5_webstorage.asp

 function onClick() { 
    if (localStorage.hasOwnProperty('clicks')) {
        localStorage.clicks = Number(localStorage.clicks)+1;
    } else {
        localStorage.clicks = 0;
    }
    document.getElementById("clicks").innerHTML = localStorage.clicks;
 };

如何设置值不会重置的点击计数器

3 个答案: