javascript - 保存每个项目被点击的点击次数

Question

目前，我尝试为我的网页建立一个点赞计数器。
下面您可以看到点击计数器。它正在全面运作。可悲的是(但可以肯定)只是针对当前 session ......是否有可能永远存储该值？

最后一件事!网站上有不止一张喜欢的图片。所以我不知道如何使用 cookie 或本地存储来存储值。

也许您还有其他想法？也许没有 JS？

var currentValue = 0,
  count = $('.count');

$(document).ready(function() {
  count.each(function(i) {
    $(this).addClass('' + (i += 1));
  });
});



$('.heart').on('click', function(e) {
  var clickElement = $(this).find('.count');

  clickElement.html(parseInt(clickElement.html(), 10) + 1);
});

<p>Click on the Number to increase it by 1</p>

<a class="heart">
  <span class="icon"></span>
  <span class="count">0</span>
</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

这是它在页面上的样子:

Answer 1

您应该做的是将它们存储在数据库中。您应该将项目的 id 和当前计数发送到服务器，通过查询数据库检查当前计数和项目是否存在，如果验证通过，则将它们保存到数据库(更新或插入，具体取决于您的数据库方案)。

已更新

注意:在将值保存到数据库之前检查值的正确性非常重要。因此，通过以 $_POST 值发送项目的当前点击计数来检查当前点击计数是可靠的。您确实应该做的是通过 $_POST 发送项目的 id，然后查看该项目是否存在，如果存在，请编写以下查询以将点击计数增加一个值:

UPDATE item_table SET (click_counter = click_counter+1) WHERE item_id = ?

这有几个特点:

• 比常规的 select+increment_in_php+update 快很多更快
• 使用更少的系统资源
• 这是最可靠的递增方法，因为 while在 PHP 中处理用户值，另一个请求可能只是更新了该值，因此您在 PHP 中的值不是最新的一。但通过SQL，它已经知道最新的值是多少并且不会发生此类碰撞。

如果您将 click_counter 作为 item_table 的一列并且您只需更新它，则适用上述方法和说明。但我有一个建议给你(当然如果你还没有实现的话)

创建一个名为 item_counts 的表，然后创建三列，例如 id、item_id、date_created。您可以添加许多其他列，例如 user_ip、user_id(如果经过身份验证)等。

然后，每次访问时，您只需向表中添加一条记录即可。与之前的解决方案相比，它具有以下几个特点:

• 兼容数据库原子性规则。

• 您可以稍后对其进行分析。

通过查询数据库得到click_counts:

SELECT COUNT(id) FROM item_counts WHERE item_id = ?

此解决方案的缺点是，在呈现页面时，您必须进行额外的查询才能获取项目的 click_counts。当然，它会占用更多的服务器空间，但如果您的项目不小，那么这是值得的。然而，我个人从来不会试图为了项目的规模而扼杀良好的实践，如果这种实践很容易实现的话。

更新注释结束

您可以发送ajax请求:

var already_clicked = [];

$('.heart').on('click', function(e) {
  var clickElement = $(this).find('.count');
  var itemId = $(this).attr("data-id");
  // changes to current view in the page
  clickElement.html(parseInt(clickElement.html(), 10) + 1);


  // send an ajax request
  $.ajax({
     url : "server.php",
     data : { count : parseInt(clickElement.html(), 10),
            id :  },
     type : "POST",
     success : function(data){
        // do something in the success
     }
  });
});

现在您的 PHP 脚本应该如下所示

// using MySQLi extension
$db = new mysqli("localhost", "usr", "pass", "db");

if( isset($_POST["count"]) && isset($_POST["id"]) )
{
     if (check_if_the_count_is_ok($_POST["count"], $_POST["id"])) 
     {
       $new_count = $_POST["count"] + 1;
       $stmt = $db->prepare("INSERT INTO counts (count, id) VALUES(?, ?)");

       $stmt->bind_param("ii", $new_count, $_POST["id"]);
       $stmt->execute();

       echo json_encode([ "result" : true ]);
     }
     else
     {
      echo json_encode([ "result" : false]);
     }


}


function check_if_the_count_is_ok($item_count, $item_id)
{
     // write a select query to see if the count is true
} 

注意:我假设您单击的项目包含一个名为“data-id”的属性，该属性保存要保存到数据库的项目的 ID。