Javascript 如何保持按钮的颜色时，点击喜欢和刷新页面

“我的喜欢”按钮的默认颜色为灰色，当用户点击“喜欢”按钮时，它将运行“喜欢”按钮，颜色将变为红色。。我使用ajax来插入数据，如果用户按下按钮。。。如果用户在红色时再次点击like按钮，它将运行togglepost“厌恶”，my db中的数据将被删除

按钮式

<div class="boxcoracao">
    <span class="coracao" name="like"><br>&emsp;&emsp;&emsp;Love</span>
</div>

这是gif按钮

---

但是我的问题是当用户点击like按钮并刷新页面时，like按钮将重置为灰色而不是红色。你知道如何解决这个问题吗？。。当用户点击like时，它将是红色的，而当用户刷新页面时，按钮仍将是红色的，除非用户再次点击按钮，使其不象？。

例如，您必须执行一些Ajax来保存数据库中的状态或文件系统中的一些缓存

如果您想要不那么健壮的东西，可以将状态保存在cookie或localstorage中。或者更持久：在会话变量中，一旦浏览器会话丢失，该变量将消失

然后，当请求页面时，检查数据库、缓存、cookie、会话或其他内容中是否存在您的状态，并在HTML中为按钮指定相应的类

例如，如果您使用的是PHP，可以这样做：

<?php
$buttonClasses = ['coracao'];
$didLike = your_read_from_cache_function();

if ($didLike)
    $buttonClasses[] = 'ativo';
?>
<div class="boxcoracao">
    <span class="<?= implode(' ', $buttonClasses) ?>" name="like"><br>&emsp;&emsp;&emsp;Love</span>
</div>

当用户点击like按钮时，您需要在数据库中更新它。你确定你会那样做吗？因为我在你发布的代码中没有看到这种情况。是的，先生。。。。我这样做了，我有ajax将数据保存到我的数据库中，我只是没有在我的帖子中包含它，但类似的和不同的是保存在我的数据库中。。我唯一的问题是，当我刷新/重新加载页面时，即使我已经点击了like按钮，按钮也会再次变灰。如果是这样，那么你肯定是做错了
ajax
向我们展示
ajax
，以帮助你更好地使用。请参阅上面的更新。我已经做了，它不仅包括在我的帖子中，还包括了保存部分完成了，但剩下的唯一问题是当我点击“喜欢”按钮并重新加载页面时，该按钮会变为红色，但不会在重新加载页面时变为灰色。我更新了答案。当然，您必须从函数中的数据库中读取数据，并找出用户是否已经“喜欢”-相应地替换示例中的
your\u read\u from\u cache\u函数（）？？基于我上面的帖子？对不起，你至少得试试。提示：必须是一个使用
SELECT plike FROM…
检查数据库并返回
Boolean
的函数。
    function UpdateLikes($postid, $postmember, $likeid, $action){

        if ($action == "dislike"){
         $sql = "DELETE FROM plike WHERE pl_puid = '$postid' AND pl_uid = '$likeid'";
            var_dump($sql);
        $result = $this->dbh->prepare($sql);
        $result->execute();
        return $result->rowCount() ? true : false;
        } else{
        // before inserting you might want to check if they alredy liked or not before adding their count again.
        $query = "INSERT INTO plike SET pl_puid='$postid',pl_memid='$postmember',pl_uid='$likeid'";
            $query = $this->dbh->prepare($query);
            var_dump($query);
            $result = ($query->execute() ? true : false);
            return $result;
        }

  }

<?php
$buttonClasses = ['coracao'];
$didLike = your_read_from_cache_function();

if ($didLike)
    $buttonClasses[] = 'ativo';
?>
<div class="boxcoracao">
    <span class="<?= implode(' ', $buttonClasses) ?>" name="like"><br>&emsp;&emsp;&emsp;Love</span>
</div>