为何classList会应用于全部心形图标？如何仅激活单个图标？

你当前的代码只在localStorage里存了active这个类名，没有记录具体是哪一个心形图标被选中，所以刷新页面时，所有图标都会执行classList.toggle，导致全部被激活。要实现仅激活单个图标的需求，需要同时存储被选中图标的唯一标识和类名，具体修改如下：

步骤1：给每个心形图标添加唯一标识 #

给每个<i>标签加上data-id属性，用来区分不同图标：

<i class="icons fa-heart" data-id="heart-1"></i>
<i class="icons fa-heart" data-id="heart-2"></i>
<i class="icons fa-heart" data-id="heart-3"></i>

步骤2：修改JavaScript代码 #

const hearts = document.querySelectorAll('.icons .fa-heart');
// 从本地存储读取保存的激活状态
const savedActiveHeart = JSON.parse(localStorage.getItem('activeHeart'));

// 页面加载时恢复激活状态
if (savedActiveHeart) {
  // 通过data-id找到对应的图标
  const targetHeart = document.querySelector(`.icons .fa-heart[data-id="${savedActiveHeart.id}"]`);
  if (targetHeart) {
    targetHeart.classList.add(savedActiveHeart.className);
  }
}

// 为每个图标绑定点击事件
hearts.forEach(heart => {
  heart.addEventListener('click', () => {
    // 先移除所有图标的激活类，确保同一时间只有一个激活
    hearts.forEach(h => h.classList.remove('active'));
    // 给当前点击的图标添加激活类
    heart.classList.add('active');
    // 把当前激活图标的ID和类名存到本地存储
    localStorage.setItem('activeHeart', JSON.stringify({
      id: heart.dataset.id,
      className: 'active'
    }));
  });
});

代码说明 #

• 用JSON.stringify把包含图标ID和类名的对象存入localStorage，这样能精准定位到被选中的图标。
• 页面刷新时，解析存储的对象，通过data-id找到对应图标，只给它添加激活类，避免所有图标被激活。
• 点击图标时先清空所有图标的激活状态，再给当前点击的图标添加类，保证始终只有一个图标处于激活状态。

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