如何为点赞按钮添加localStorage存储，刷新页面后保留点赞状态

完整修改后代码 #

HTML 部分（和原有代码一致，无需改动） #

<button class="like" onclick="like(this)"><i class="fa fa-thumbs-up"></i></button>

JS 部分 #

// 页面加载时优先从localStorage读取历史点赞状态，无历史记录默认未点赞
let isLiked = localStorage.getItem('likeState') === 'true';

// 页面加载完成后直接渲染对应点赞状态的图标颜色
document.addEventListener('DOMContentLoaded', () => {
  const thumbIcon = document.querySelector('.like .fa-thumbs-up');
  thumbIcon.style.color = isLiked ? 'orange' : 'black';
})

function like(element) {
  const currentElement = element.querySelector('.fa-thumbs-up');
  // 切换点赞状态
  isLiked = !isLiked;
  // 更新图标颜色
  currentElement.style.color = isLiked ? 'orange' : 'black';
  // 将最新状态写入localStorage持久化存储
  localStorage.setItem('likeState', isLiked);
}

实现逻辑说明 #

• localStorage存储的内容均为字符串格式，所以读取状态时需要做等值判断，不能直接把读取到的值当做布尔值使用
• 页面初始化阶段就完成状态读取和样式渲染，避免刷新后点赞样式重置
• 每次点击触发状态切换后立刻同步存储最新状态到localStorage，保证状态和存储数据一致

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