如何使用Javascript对HTML文档进行永久更改? [英] How to make changes to HTML document permanent using Javascript?
问题描述
-
我有一个简单的类似计数器代码，但是所做的更改消失了 页面刷新后.
I have a simple like counter code, but the changes made disappear after the page is refreshed.
为什么会发生这种情况，应该使用PHP完成吗?
Why does this happen, should this be done using PHP ?
仅出于知识上的考虑，这不是主要问题，如何才能更高效地编写此代码.
How can this code be written much more efficiently, just for the knowledge anyway this is not the main question.
var like=document.getElementById("like__image");
addEventListener("click",function(){
var likeBox=document.getElementById("like__box");
var likeAdd=Number(likeBox.textContent)+1;
likeBox.textContent=likeAdd;
});
推荐答案
根据我的理解，您需要将此计数设置为全局计数，并可供访问您页面的所有用户使用. Javascript是客户端脚本，使用此脚本可以创建的唯一文件是cookie.在这种情况下，您不能使用cookie，因为它是为每个用户单独创建的.
According to my understanding, you need this count to be global and to be available to all the users who access your page. Javascript is a client side script and the only file you can create using this is a cookie. In this case, you can't use cookies as it is created separately for each user.
要获得持久性结果，请使用数据库，或者如果您不为应用程序/网站使用数据库，则可以使用文件(例如.txt或.xml)保存计数，下次您可以读取该文件以显示再来一次.但是通常建议在文件系统上使用数据库.
For persistent result use a database or if you are not using a database for your application/website you can use a file (like .txt or .xml) to save your count and next time you can read from that file to display it again. But generally using database is recommended over a file system.
使用文件系统:
对于主文件，我们有一个小的php代码来获取现有的like计数，并且当用户单击like按钮时，ajax函数会请求like.php文件.
For main file we have a small php code to get the existing like count and an ajax function requesting like.php file when a user clicks on the like button.
HTML正文:
<?php
$likeFile = 'like.txt';
/* check if the like file exists*/
if(file_exists($likeFile)) {
/* read the only the first file of the file as we don't intend to have more */
$file = fopen($likeFile, 'r');
$like = fgets($file);
fclose($file);
if($like) {
/* if we get the line split the string "likes=number" and get the existing count */
$likeCount = end(explode('=', $like));
}
} else {
$likeCount = 0;
}
?>
<a href="javascript:void(0)" onclick="like()">Like <span id="count"><?php echo $likeCount ?></span></a>
JavaScript:
Javascript:
<script type="text/javascript">
function like(){
$.ajax({
type:"POST",
data: {like:true},
url: "like.php",
success: function(result){
$('#count').text(result);
}
});
}
</script>
在like.php中，我们正在检查post变量"like"，以确保我们不会在直接访问该文件时简单地增加like.在这里，我们正在检查like.txt文件是否存在.如果为true，则获取第一行like=1，获取计数，增加计数并将其返回给ajax请求.如果为false，则仅在第一次也是唯一一次使用like=1创建文件like.txt.
In the like.php, we are checking for the post variable "like" just to be sure that we don't simply increment the like on direct access to this file. Here we are checking if the like.txt file exists or not. If true, it gets the first line like=1, get the count, increment the count and return it back to the ajax request. If false, it simply creates the file like.txt with like=1 for the first and only time.
<?php
if(isset($_POST['like']) && $_POST['like'] == true)
{
$likeFile = 'like.txt';
/* check if the like file exists*/
if(file_exists($likeFile)) {
/* read the only the first file of the file as we don't intend to have more */
$file = fopen($likeFile, 'r');
$like = fgets($file);
fclose($file);
if($like) {
/* if we get the line split the string "likes=number" and get the existing count */
$likeCount = end(explode('=', $like));
$likeCount++; /* increment the count by one */
file_put_contents($likeFile, 'likes=' . $likeCount); /* write the new count the same file and save it */
echo $likeCount; /* return the like count to the ajax request */
}
} else {
/* if file does not exist create it for the first time with count 1 */
file_put_contents($likeFile, 'likes=1');
echo '1';
}
} else {
return 'Something Wrong!';
}
希望这很清楚，对您有帮助.
Hope this is clear enough and helpful for you.
这篇关于如何使用Javascript对HTML文档进行永久更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
