Saving the click counts of an item each item it is clicked

问题

Currently I try to build up a like counter for my web page.
Below you can see the click counter. It's fully working. Sadly (but for sure) just for the current session... Is there any possibility to store the value forever?

One last thing! On the website is more than one picture to like. So I have no Idea how to store the values using cookies or localstorage.

Maybe you have another Idea? Maybe no 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>

Here's how it looks like on the page:

回答1:

What you should do is to store them in a Database. You should send the id and the current count of the item to the server, check the current count and existence of the item by querying database, and if validated, save them to the database (update or insert, depending on your DB Scheme).

UPDATED

Note: It is enormously important to check the values' correctness before saving them into the database. Therefore it is reliable to check current click-count through sending the item's current click-count in a $_POST value. What you indeed should do is to just send the item's id through $_POST and then see if the item exists, if it exists, write the following query to increment the click count just one value:

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

This has several features:

It is faster than regular select+increment_in_php+update, much more faster
It uses less system resources
It is the most reliable method of incrementing, since while processing the user value in PHP, another request might just have updated that value, hence your value in PHP is not the most fresh one. But through SQL, it already knows what is the most recent value and there would be no collision of this kind.

The above method and explanation apply if you have click_counter as a column of your item_table and you just update it. But I have a recommendation for you (of course if you have not implemented this)

Make a table named, for instance, item_counts and then three columns such as id, item_id, date_created. You may add many other columns such as user_ip, user_id(if authenticated) etc.

Then by each visit, you just add a record to your table. This has several features over the previous solution:

It is compatible with Database Atomicity rule.
You can have analytics on it later.

You get the click_counts by query the datatabase:

SELECT COUNT(id) FROM item_counts WHERE item_id = ?

The disadvantage with this solution is that you have to have an extra query for getting the click_counts of an item when rendering the page. It of course takes more space on the server, but it is worth if your project is not a small-one. However I personally never try to kill good practices for a project's scale, if that practice is easily accessible.

END OF UPDATED NOTE

You can send an ajax request:

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
     }
  });
});

Now your PHP script should look like this

// 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
}

Note: I have assumed your clicked item contains an attribute named "data-id" which holds the id of the item to be saved to the DB.

回答2:

If you use DB with your application, manage count with each picture called lovit_count like column on your database. Then increase or decrease that field value by one for each click event.

When you load the page you can load that click times on that image from database.

来源：https://stackoverflow.com/questions/30567949/saving-the-click-counts-of-an-item-each-item-it-is-clicked

标签

javascript

php

count

save