如何实现点赞按钮刷新页面后保持已点赞状态？

看起来你遇到了点赞按钮状态持久化的问题——用户点赞后按钮切换为蓝色，但刷新页面又变回默认灰色对吧？这是因为页面初始加载时没有根据用户的实际点赞状态来初始化按钮样式，只是在点击后通过AJAX动态修改了状态，刷新后就回到了HTML的默认配置。下面是具体的解决方案：

一、后端渲染时提前注入点赞状态 #

首先要在渲染帖子页面的PHP代码中，提前判断当前用户是否已经点赞该帖子，然后把这个状态传递给前端，让按钮一开始就显示正确的颜色。

在你渲染单条帖子的PHP逻辑中添加这段判断：

// 假设$ROW是当前帖子的数据集
$i_liked = false;
if(isset($_SESSION['mybook_userid'])){
    $DB = new Database();
    $sql = "select likes from likes where type='post' && contentid = '{$ROW['postid']}' limit 1";
    $result = $DB->read($sql);
    if(is_array($result)){
        $likes = json_decode($result[0]['likes'],true);
        $user_ids = array_column($likes, "userid");
        // 检查当前用户是否在点赞列表中
        if(in_array($_SESSION['mybook_userid'], $user_ids)){
            $i_liked = true;
        }
    }
}

然后修改点赞按钮的HTML代码，根据$i_liked的值动态设置SVG的fill属性：

<a onclick="like_post(event)" href="<?=ROOT?>like/post/<?php echo $ROW['postid'] ?>" style="text-decoration:none;"> 
    <svg id="icon_like" width="22" height="22" viewBox="0 0 24 24" fill="<?php echo $i_liked ? '#1877f2' : '#626a70cf' ?>">
        <path d="M21.216 8h-2.216v-1.75l1-3.095v-3.155h-5.246c-2.158 6.369-4.252 9.992-6.754 10v-1h-8v13h8v-1h2l2.507 2h8.461l3.032-2.926v-10.261l-2.784-1.813zm.784 11.225l-1.839 1.775h-6.954l-2.507-2h-2.7v-7c3.781 0 6.727-5.674 8.189-10h1.811v.791l-1 3.095v4.114h3.623l1.377.897v8.328z"/>
    </svg> 
</a>

二、优化AJAX响应的状态更新逻辑 #

你当前的AJAX响应是直接替换整个SVG元素，其实可以简化为只修改fill属性，既高效又避免冗余代码。同时建议后端返回用户是否已点赞的明确状态，而不是仅通过点赞数判断。

1. 修改后端AJAX处理代码，添加i_liked字段 #

// 在你的ajax.php中，构造响应对象时添加
$obj->i_liked = $i_liked; // 把之前判断的点赞状态加入响应
echo json_encode($obj);

2. 前端更新response函数 #

function response(result, element) { 
    if (result != "") { 
        var obj = JSON.parse(result); 
        if (typeof obj.action != 'undefined') { 
            if (obj.action == 'like_post') { 
                // 获取按钮内的SVG元素
                const likeSvg = element.querySelector('#icon_like');
                if (likeSvg) {
                    // 根据后端返回的i_liked状态设置颜色
                    likeSvg.setAttribute('fill', obj.i_liked ? '#1877f2' : '#626a70cf');
                }
                if (typeof obj.info != 'undefined') { 
                    var info_element = document.getElementById(obj.id); 
                    info_element.innerHTML = obj.info; 
                } 
            } 
        } 
    } 
}

三、问题根源总结 #

你之前的实现只处理了点击按钮后的动态状态更新，但页面首次加载时，HTML中的SVG是默认的灰色#626a70cf，没有结合用户的实际点赞状态做初始化，所以刷新页面后就回到了默认值。通过后端渲染时提前判断状态并设置对应样式，就能彻底解决这个问题。

内容的提问来源于stack exchange，提问作者rustyrice23