Question

我有一个简单的计数器代码，但变化消失了页面刷新后。
为什么会发生这种情况，如果使用PHP完成？
如何更有效地编写此代码，只是为了知识，这不是主要问题。

var like=document.getElementById("like__image");
addEventListener("click",function(){
    var likeBox=document.getElementById("like__box");
    var likeAdd=Number(likeBox.textContent)+1;
    likeBox.textContent=likeAdd;
});

Answer 1

根据我的理解，您需要将此计数设为全局，并且可供访问您网页的所有用户使用。 Javascript是客户端脚本，您可以使用它创建的唯一文件是cookie。在这种情况下，您不能使用Cookie，因为它是为每个用户单独创建的。

对于持久性结果使用数据库，或者如果您没有为应用程序/网站使用数据库，则可以使用文件（如.txt或.xml）来保存计数，下次可以从该文件中读取以显示它再次。但通常建议在文件系统上使用数据库。

使用文件系统：

对于主文件，当用户点击like按钮时，我们有一个小的PHP代码来获取现有的count和ajax函数请求like.php文件。

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：

<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变量＆＃34; like＆＃34;只是为了确保我们不会直接访问此文件。这里我们检查是否存在like.txt文件。如果为true，则获取第一行like=1，获取计数，递增计数并将其返回给ajax请求。如果为false，它只会在第一次和第一次创建带有like=1的文件like.txt。

<?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!';
}

希望这很清楚，对你有帮助。

Answer 2

如果您希望以简单的方式跟踪页面重新加载的信息，我建议您查看cookies。如果您希望除了创建它的用户之外的任何人都可以使用这些信息，那么您可能需要某种形式的服务器端持久性，例如数据库。

Answer 3

重新加载页面时会重新加载javascript，因此更改也会丢失。

但是，您可以将它们永久存储在Web服务中，或者最好存储在localStorage中。然后，您可以在页面加载时从localStorage检索。

使用PHP可能无法在不将其存储的情况下提供帮助。

我认为你的代码写得更有效率。

如何使用Javascript永久更改HTML文档？

3 个答案: