like to liked resume after reloading page

Question

I'm creating a website where user can "like" certain posts. I want to change "like" to "liked" when it is clicked. The following code achieve this goal. The problem is, after I refresh the page, "liked" resume into "like". Can someone tell me how to permanently change "like" to "liked"? Is it possible to get it done in JavaScript? I don't want to run a sql statement in every posts to check whether a particular user clicked "like" for that post because those statements may slow the website.

Here is my php code:

echo"<a href="#" class="likes" id="$postid" >like</a>";

here is my javascript:

<script>
    $(function(){
        $(".likes").click(function(){
            var postid = $(this).attr("id");
            if (document.getElementById(postid).innerHTML=="like")
                document.getElementById(postid).innerHTML="liked";
            else
                document.getElementById(postid).innerHTML="like";
 </script>

Answer 1

to achieve your goal., you have to save it to the database,
on your function,
 $(".likes").click(function(){
            var postid = $(this).attr("id");
            var like = 0;
            if (document.getElementById(postid).innerHTML=="like")
                document.getElementById(postid).innerHTML="liked";
                 like = 1;
            else
                document.getElementById(postid).innerHTML="like";
                 like = 0;

             $.ajax{
                     type: POST
                     data: { 'like': like, 'postid': id}
                     url: url to save your query
                     ----------etc 
             }

});

create an ajax post and save it to your database,
that's the only way you it wont disappear,