求助：实现社交平台式点赞按钮（点击增减计数+代码修复+计数存储）

一、代码问题修复 #

你写的代码里，判断条件if (heart.liked)是错误的——DOM元素本身没有liked这个原生属性，导致每次判断都不成立，所以只会执行click--，计数一直减少。另外变量click未初始化，可能引发NaN等异常。

修改后的代码：

// 初始化点赞计数，确保有初始值
let click = 0;

function liked(heart) {
    // 切换点赞状态类
    heart.classList.toggle("liked");
    // 用classList.contains判断当前是否处于点赞状态
    if (heart.classList.contains("liked")) {
        click++;
    } else {
        click--;
    }
    // 用textContent比innerHTML更安全，避免注入风险
    document.getElementById('clicks').textContent = click;
}

二、点赞计数的存储方案 #

根据你的需求场景，分两种情况选择：

1. 仅当前用户可见的计数（前端存储） #

• localStorage：数据会保存在用户浏览器中，关闭页面再打开依然保留。
  示例：修改计数后同步存储，页面加载时读取

  // 页面加载时读取存储的计数
  let click = parseInt(localStorage.getItem('likeCount')) || 0;
  // 更新计数后同步到localStorage
  function liked(heart) {
      heart.classList.toggle("liked");
      click = heart.classList.contains("liked") ? click + 1 : click - 1;
      document.getElementById('clicks').textContent = click;
      localStorage.setItem('likeCount', click);
  }
  

• sessionStorage：和localStorage类似，但关闭浏览器标签页后数据就会清空，适合临时记录。

2. 所有用户共享的统一计数（后端存储） #

如果要让所有访客看到同一个点赞数，必须用后端+数据库：

• 点击按钮时，前端发送AJAX请求到后端接口（比如POST请求），携带内容ID等标识。
• 后端接口接收请求后，先判断当前用户是否已经点过赞（可以用用户ID、IP或Cookie记录），如果没点过就增加计数，点过就减少。
• 后端更新数据库（比如MySQL、MongoDB）中的对应计数，然后把最新计数返回给前端，前端更新页面显示。

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