如何为点赞按钮添加基于24小时Cookie生效的临时active类

1. 先修改Blade模板，增加自定义属性方便JS识别 #

给每个点赞按钮增加data-article-id（存储当前文章ID）和data-like-type（存储点赞类型：heart/finger）属性，避免JS解析href获取参数的麻烦，修改后代码如下：

<a href="/article/{{ $article->id }}?type=heart" class="comments-sub-header__item like-button" data-article-id="{{ $article->id }}" data-like-type="heart">
<div class="comments-sub-header__item-icon-count">
  {{ $article->like_heart }}
</div>
</a>

<a href="/article/{{ $article->id }}?type=finger" class="comments-sub-header__item like-button" data-article-id="{{ $article->id }}" data-like-type="finger">
<div class="comments-sub-header__item-icon-count">
  {{ $article->like_finger }}
</div>
</a>

2. 替换原有JS代码，新增初始化状态读取、点赞后加active逻辑 #

完整JS代码如下：

// 工具函数：读取指定cookie值
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

$(function() {
  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
    },
  });

  // 页面加载完成后初始化点赞状态
  const likesCookie = getCookie('article_likes');
  let likedMap = {};
  if (likesCookie) {
    try {
      likedMap = JSON.parse(decodeURIComponent(likesCookie));
    } catch (e) {
      likedMap = {};
    }
  }
  // 遍历所有点赞按钮，判断是否需要加active类
  $('.like-button').each(function() {
    const articleId = $(this).data('article-id').toString();
    const type = $(this).data('like-type');
    // 判断当前文章+类型是否有24小时内的点赞记录
    if (likedMap[articleId] && likedMap[articleId][type]) {
      const likeTime = new Date(likedMap[articleId][type]);
      const expireTime = new Date(likeTime.getTime() + 24 * 60 * 60 * 1000);
      // 未过期就加active类
      if (new Date() < expireTime) {
        $(this).addClass('active');
      }
    }
  });

  // 点赞按钮点击事件
  $('.like-button').on('click', function(event) {
    event.preventDefault();
    const $btn = $(this);
    // 已经点赞就直接返回，避免重复请求
    if ($btn.hasClass('active')) return;

    const href = $btn.attr('href');
    const $countEl = $btn.find('.comments-sub-header__item-icon-count');

    $.ajax({
      url: href,
      type: 'POST',
      success: function(res) {
        // 点赞成功：加active类，计数+1，不需要刷新页面
        $btn.addClass('active');
        $countEl.text(parseInt($countEl.text()) + 1);
      },
      error: function(xhr) {
        // 已经点赞过的情况，也给按钮加active类，保证状态同步
        if (xhr.responseJSON?.message?.includes('already liked')) {
          $btn.addClass('active');
        }
      }
    });
  });
});

3. 逻辑说明 #

• 页面初始化时会自动读取cookie里的点赞记录，判断24小时有效期，给符合条件的按钮自动加active类，就算刷新页面状态也不会丢失
• 点击点赞按钮时会先判断是否已经激活，避免重复提交请求
• 点赞请求成功后直接修改页面状态，不需要刷新页面，体验更好
• 后端24小时后自动清除点赞限制的逻辑不需要修改，JS会自动根据cookie里的时间判断是否移除active类

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