Question

目前我尝试为我的网页建立一个类似的计数器。
您可以在下面看到点击计数器。它完全有效。可悲的是（但肯定）仅适用于当前的会议......是否有可能永远存储价值？

最后一件事！在网站上不止一张图片。所以我不知道如何使用cookie或localstorage存储值。

也许你有另一个想法？也许没有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>

以下是页面上的样子： enter image description here

Answer 1

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

<强>已更新

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

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

这有几个特点：

比常规select + increment_in_php +更新更快更快
使用较少的系统资源
这是最可靠的递增方法，因为虽然在PHP中处理用户值，另一个请求可能只有更新了这个值，因此你在PHP中的价值并不是最新鲜的一。但是通过SQL，它已经知道什么是最新的价值并且不会有这种碰撞。

如果您将click_counter作为item_table的一列并且只是更新它，则上述方法和说明适用。但我有一个推荐给你（当然，如果你没有实现这个）

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

然后，每次访问时，只需在表格中添加一条记录即可。这比以前的解决方案有几个功能：

它与Database Atomicity规则兼容。
您可以稍后对其进行分析。

通过查询数据库获得click_counts：

SELECT COUNT(id) FROM item_counts WHERE item_id = ?

此解决方案的缺点是，在呈现页面时，您必须有额外的查询来获取项目的click_counts。它当然需要在服务器上占用更多空间，但是如果你的项目不是很小的话，这是值得的。但是，如果这种做法很容易获得，我个人从不试图杀掉项目规模的良好做法。

END OF UPDATED NOTE

您可以发送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。

Answer 2

如果您在应用中使用数据库，请使用数据库中名为 lovit_count 的每张图片管理计数。然后为每个点击事件将该字段值增加或减少一个。

加载页面时，您可以从数据库中加载该图像上的单击时间。

保存每个项目单击项目的点击次数

2 个答案: