按钮在页面重新加载时保持单击状态

Question

我需要知道如何解决以下问题。

我正在研究博客文章的喜欢/不喜欢系统，该系统仅在本地存储中记住用户喜欢的内容。

问题是，当我喜欢帖子时，按钮会被禁用（应该如此），但是当我重新加载页面时，喜欢的数量会增加（点赞按钮仍然被点击）。我该如何解决这个问题？

---

<!-- Likes button -->   
                    <button id="likebtn" type="button">                  
                            <input type="number" id="input1" value ="<?php echo $post_likes;?>"</input>    
                    </button>


                    </p>
                        <script>
                            let likebtn = document.querySelector('#likebtn');
                            let input = document.querySelector('#input1'); 

                            //local storage - saving ID of liked post
                            var likedID = parseInt('<?php echo $link_post_id ?>');
                            var likedIDhistory = JSON.parse(localStorage.getItem("arrayOfLikedPosts")) || [];
                            var isLiked = false;

                            for (var i = 0; i < likedIDhistory.length; i++){
                                var arrayLS = JSON.parse(localStorage["arrayOfLikedPosts"]);
                                var actual = arrayLS[i];
                                
                                if(likedID == actual) {
                                    isLiked= true;
                                    console.log("true");
                                }                            
                            }

                            //if is not liked by "user"
                            if (isLiked == false) {                                                       
       
                            likebtn.addEventListener('click', likes_function=>
                            {
                            input1.value = <?php echo $post_likes?> + 1;
                            input.style.color = "#a1c4fd";

                            <?php
                            $like_query = "UPDATE posts SET post_likes_count=post_likes_count +1 WHERE post_id=$link_post_id";
                            $send_query2 = mysqli_query($connection, $like_query);

                            $query2 = "SELECT * FROM posts WHERE post_id=$link_post_id";
                            $like_post_query = mysqli_query($connection, $query2);
                            ?>  

                            likedIDhistory.push(likedID);
                            localStorage.setItem("arrayOfLikedPosts", JSON.stringify(likedIDhistory));
                            document.getElementById("likebtn").disabled = true;
                            document.getElementById("likebtn").style.opacity=0.5; 
                         });


                            //if is already liked by "user"
                            } else {
                                document.getElementById("likebtn").disabled = true;
                                document.getElementById("likebtn").style.opacity=0.5;
                            }                  

                        </script>

---

Answer 1

在您的script 标记中，您有一个<?php 代码，它始终会更新点赞数：

<?php
  $like_query = "UPDATE posts SET post_likes_count=post_likes_count +1 WHERE post_id=$link_post_id";
  $send_query2 = mysqli_query($connection, $like_query);

  $query2 = "SELECT * FROM posts WHERE post_id=$link_post_id";
  $like_post_query = mysqli_query($connection, $query2);
?>  

您似乎打算只在 JavaScript 的 likebtn.addEventListener 中执行 PHP 代码。不是这样的。

PHP 代码总是被执行——它不知道你在 JavaScript 的某些代码中。 PHP 和 JavaScript 不能以这种方式相互配合。
这就是为什么它总是在计数。

您可以向另一个 PHP 脚本发送请求，该脚本会向上计数并刷新按钮。

您所说的本地存储实现在您的代码中不存在，所以我不能谈论这个。但这肯定是您在问题标题中描述的错误。

Answer 2

要完成此任务，您需要在文件中添加以下代码，用于喜欢和不喜欢并保存在本地存储中

$(".like-btn").click( function() {

    $(this).toggleClass('clicked');
  event.preventDefault();

});



$(".panel-group_btn span").click(function(){
                       var btnStorage = $(this).attr("id");

                        if($(this).hasClass("clicked")) {
                            localStorage.setItem(btnStorage, 'true');
                        } else {
                            localStorage.removeItem(btnStorage, 'true');
                        }

                    });


                    $( ".panel-group_btn span" ).each(function() {
                      var mainlocalStorage = $( this ).attr( "id" );

                      if(localStorage.getItem(mainlocalStorage) == 'true') {
                        $(this).addClass("clicked");
                    } else {
                        $(this).removeClass("clicked");
                    }



                    });

body, a {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; text-decoration:none;
}


a.panel-group_btn {color: #888;display:block;}

a.like-btn {
    color: #888;
    font-size: 14px;
}


span.clicked {
  color: #00dfae; 
  font-weight:bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Like button</h1>

<p>Uses the span's id to name the Local Storage key. Check Local Storage in your inspector to see the saved keys.</p>

<a  class="panel-group_btn" href="#" >
    <span id="like-01" class="like-btn">
    Like
    </span>
</a>

<a  class="panel-group_btn" href="#" >
    <span id="like-02" class="like-btn">
    Like
    </span>
</a>

<a  class="panel-group_btn" href="#">
    <span id="like-03" class="like-btn">
    Like
    </span>
</a>

如果您有任何帮助，请支持我的回答！