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

currently try build counter web page.
below can see click counter. it's working. sadly (but sure) current session... there possibility store value forever?

one last thing! on website more 1 picture like. have no idea how store values using cookies or localstorage.

maybe have 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 number increase 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 looks on page:

what should store them in database. should send id , current count of item server, check current count , existence of item querying database, , if validated, save them database (update or insert, depending on db scheme).

updated

note: enormously important check values' correctness before saving them database. therefore reliable check current click-count through sending item's current click-count in $_post value. indeed should send item's id through $_post , see if item exists, if exists, write following query increment click count 1 value:

update item_table set (click_counter = click_counter+1) item_id = ? 

this has several features:

• it faster regular select+increment_in_php+update, more faster
• it uses less system resources
• it reliable method of incrementing, since while processing user value in php, request might have updated value, hence value in php not fresh one. through sql, knows recent value , there no collision of kind.

the above method , explanation apply if have click_counter column of item_table , update it. have recommendation (of course if have not implemented this)

make table named, instance, item_counts , 3 columns such id, item_id, date_created. may add many other columns such user_ip, user_id(if authenticated) etc.

then each visit, add record table. has several features on previous solution:

• it compatible database atomicity rule.

• you can have analytics on later.

you click_counts query datatabase:

select count(id) item_counts item_id = ? 

the disadvantage solution have have query getting click_counts of item when rendering page. of course takes more space on server, worth if project not small-one. never try kill practices project's scale, if practice accessible.

end of updated note

you can send ajax request:

var already_clicked = [];  $('.heart').on('click', function(e) {   var clickelement = $(this).find('.count');   var itemid = $(this).attr("data-id");   // changes current view in page   clickelement.html(parseint(clickelement.html(), 10) + 1);     // send ajax request   $.ajax({      url : "server.php",      data : { count : parseint(clickelement.html(), 10),             id :  },      type : "post",      success : function(data){         // in success      }   }); }); 

now php script should 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 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 select query see if count true }  

note: have assumed clicked item contains attribute named "data-id" holds id of item saved db.