嘿，作为HTML/CSS/JS新手，你已经搞定了样式切换的核心部分啦！要让点赞状态能保存下来，咱们可以用浏览器自带的localStorage来实现前端轻量持久化——这个方案不需要后端支持，能把用户的点赞状态存在浏览器里，刷新页面也不会丢失。下面是具体的改造步骤：

1. 给点赞按钮添加唯一标识 #

先修改你的HTML，给每个点赞按钮加上data-id属性，这样如果页面有多个点赞项时，能精准区分它们：

Click to vote: <span class="vote" data-id="vote-item-1"> </span>

2. 更新JavaScript逻辑，加入存储读写 #

咱们需要做两件事：页面加载时恢复之前的点赞状态，点击按钮时同步更新存储的状态。替换你原来的JS代码为：

// 页面加载完成后，恢复之前的点赞状态
document.addEventListener('DOMContentLoaded', () => {
  // 遍历所有点赞按钮
  document.querySelectorAll('.vote').forEach(btn => {
    const voteId = btn.dataset.id;
    // 从localStorage读取状态，默认未点赞
    const hasVoted = localStorage.getItem(voteId) === 'true';
    if (hasVoted) {
      btn.classList.add('on');
    }
  });

  // 绑定点击事件
  document.querySelectorAll('.vote').forEach(btn => {
    btn.addEventListener('click', event => {
      const targetBtn = event.target;
      const voteId = targetBtn.dataset.id;
      
      // 切换点赞样式
      targetBtn.classList.toggle('on');
      
      // 获取当前点赞状态并保存到localStorage
      const currentState = targetBtn.classList.contains('on');
      localStorage.setItem(voteId, currentState.toString());
    });
  });
});

关键逻辑说明 #

• localStorage的特点：它是浏览器提供的本地存储API，只能存储字符串类型的数据，所以我们把布尔值转成字符串保存；
• data-id的作用：确保每个点赞按钮有唯一标识，避免多个点赞项的状态互相覆盖；
• DOMContentLoaded事件：确保页面元素加载完成后再执行JS，避免找不到元素的问题。

如果之后你需要实现跨设备同步点赞状态、统计总点赞数这类功能，就需要配合后端接口（比如用fetch发送请求到后端），把点赞状态存在数据库里。但对于入门来说，先用localStorage实现本地持久化是非常合适的~

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