1

Here i have found a JavaScript button click counter that counts the no. of clicks on a button and saves the number in something called web storage, I don't know what that really is.

One thing I know for sure that this script only works for one computer, meaning if I click the button 10 times then if any other visitor clicks the button it will not show that number of clicks to him which i have clicked before.

Now what i need is that, somehow either with javascript or php, the number of clicks should be saved on a text file in my server, and later whenever any other visitor visits the HTML page he also should get the same number which is present in the text file.

Here the HTML Page with the code.

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (localStorage.clickcount)
    {
    localStorage.clickcount=Number(localStorage.clickcount)+1;
    }
  else
    {
    localStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

In a simple way,

There is a button on an HTML page.

If visitor A clicks it for 5 times and close the page.

And later, visitor B visits the page he should get the number 5 first, and then when he clicks, it should get counted and saved automatically.

4
  • You'll need server-side code to produce this effect. What language are you using? PHP? ASP?
    – Ohgodwhy
    Commented Sep 29, 2012 at 7:28
  • @Samon Souza You'll need to create an ajax call to send the data to the server. The server then needs to evaluate the response, and open the file, write into the file, then close the file. Now, everytime the page is requested you'll need to include the text in that file, and use the text as a counter.
    – Ohgodwhy
    Commented Sep 29, 2012 at 7:38
  • Yes, please could you show me how to do that, please cause i am a beginner. i'll be really great full if you do the same Commented Sep 29, 2012 at 7:51
  • Just a note on locaStorage: it's a sanboxed environment with about 2-10MB per domain (by default) to save data to (in JSON format). localStorage is ofc. only accessible to one user. It can also be cleared in the browser storage settings, though.
    – webketje
    Commented Jul 25, 2014 at 22:53

3 Answers 3

3

this is a simple thing to do. This answer is derived from w3schools. Here AJAX and PHP is being used. To save the value, we use a text file called "vote_result.txt".

index.html

<html>
    <head>
    <script type="text/javascript">
    function getVote(int)
    {
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("poll").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","poll_vote.php?vote="+int,true);
    xmlhttp.send();


    if(typeof(Storage)!=="undefined")
      {
      if (localStorage.clickcount)
        {
        localStorage.clickcount=Number(localStorage.clickcount)+1;
        }
      else
        {
        localStorage.clickcount=1;
        }
      document.getElementById("result").innerHTML="You have voted " + localStorage.clickcount + " times before this session";
      }
    else
      {
      document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
      }
    }

    </script>

    </head>
    <body bgcolor=#5D003D>
    <div id="poll">

    <p>Click the button to see the counter increase.</p>
    <p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p><form>
    <input type="Button" class="voteButton" name="vote" value="Vote" onclick="getVote(this.value)" />
    </form>
    </div>
    </body>
    </html>

poll_vote.php

<?php
$vote = $_REQUEST['vote'];

//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0)
  {
  $yes = $yes + 1;
  }
if ($vote == 1)
  {
  $no = $no + 1;
  }

//insert votes to txt file
$insertvote = $yes;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>    
<table>
<tr>
<td><div id="votesMsg">Total Votes  :</div></td>
<td><div id="votesCounter">
<?php echo($yes); ?></div>
</td>
</tr>
</table>
<input type="Button" class="voteButton" name="vote" value="Vote again !!!" onclick="getVote(this.value)" />

then in the working directory, create a file named poll_result.txt

Thats all. Now run this page in localhost..

1

You should store the 'click' count into your database before an user close the page,otherwise the count will cleared to zero.If you stored count in the database in next time when another user open the page you can start the click count from the previous count.I hope you got what am saying.Thanks sujathan.

0

You have a misconception of local storage. Local storage is a way to store information to a client browser which is unique to each of the visitor to your site. It's completely different from a server database which is shared between users. In your case, there is no way for user B to know how many time user A clicked unless you stored information from user A to a server database and query for it later when user B clicked on the page.

4
  • Yes your correct, but how can i do that. Please can you help me with this. please show the CODE for me Commented Sep 29, 2012 at 7:48
  • Do you use some sort of database? Mysql?
    – Infinity
    Commented Sep 29, 2012 at 7:50
  • Since you are using php, here is a good tutorial tizag.com/mysqlTutorial Good luck!
    – Infinity
    Commented Sep 29, 2012 at 7:57
  • 1
    Here on Stack Overflow, people don't just hand over you code. Instead they point out where you're stuck and help you go forward.
    – Isuru
    Commented Sep 29, 2012 at 14:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.