JavaScript 中的按钮点击计数器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12650770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button click counter in JavaScript
提问by Samson John Souza
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.
在这里，我找到了一个 JavaScript 按钮点击计数器，可以计算否。单击按钮并将数字保存在称为网络存储的东西中，我不知道那到底是什么。
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.
我确信该脚本仅适用于一台计算机的一件事，这意味着如果我单击该按钮 10 次，那么如果任何其他访问者单击该按钮，它将不会向他显示我之前单击过的点击次数。
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.
现在我需要的是，无论是使用 javascript 还是 php，点击次数都应该保存在我服务器的一个文本文件中，以后每当其他访问者访问 HTML 页面时，他也应该得到相同的数字文本文件。
Here the HTMLPage with the code.
这是HTML带有代码的页面。
<!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.
HTML 页面上有一个按钮。
If visitor A clicks it for 5 times and close the page.
如果访问者 A 点击它 5 次并关闭页面。
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.
后来，访问者B访问了他应该先得到数字5的页面，然后当他点击时，它应该被统计并自动保存。
回答by Isham Mohamed
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".
这是一件简单的事情。这个答案来自 w3schools。这里使用了 AJAX 和 PHP。为了保存该值，我们使用了一个名为“vote_result.txt”的文本文件。
index.html
索引.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
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
然后在工作目录中，创建一个名为 poll_result.txt 的文件
Thats all. Now run this page in localhost..
就这样。现在在本地主机中运行这个页面..
回答by Sujathan R
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.
您应该在用户关闭页面之前将“点击”计数存储到您的数据库中，否则计数将被清除为零。如果您将计数存储在数据库中，下次其他用户打开页面时，您可以从以前的计数。我希望你明白我在说什么。谢谢 sujathan。
回答by Infinity
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.
您对本地存储有误解。本地存储是一种将信息存储到客户端浏览器的方法，该浏览器对于您站点的每个访问者都是唯一的。它与用户之间共享的服务器数据库完全不同。在您的情况下，用户 B 无法知道用户 A 单击了多少次，除非您将用户 A 的信息存储到服务器数据库中，并在用户 B 单击页面时稍后查询。
