如何用JavaScript Local Storage保存点赞按钮状态，刷新不重置

要让按钮状态在页面刷新后保留，核心是给每个按钮加唯一标识，用localStorage存储状态，再在页面加载时恢复样式。以下是修改后的完整代码：

修改后的HTML（给按钮添加唯一ID） #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
 <i onclick="myFunction(this)" id="btn1" class="fa fa-thumbs-up"></i>
 <i onclick="myFunction(this)" id="btn2" class="fa fa-thumbs-up"></i>
 <i onclick="myFunction(this)" id="btn3" class="fa fa-thumbs-up"></i>
 <i onclick="myFunction(this)" id="btn4" class="fa fa-thumbs-up"></i>
 <i onclick="myFunction(this)" id="btn5" class="fa fa-thumbs-up"></i>

修改后的JavaScript（添加存储与恢复逻辑） #

// 页面加载完成后，恢复之前保存的按钮状态
document.addEventListener('DOMContentLoaded', function() {
  // 遍历所有按钮，根据ID读取存储状态
  for(let i = 1; i <= 5; i++) {
    const btnId = `btn${i}`;
    const btn = document.getElementById(btnId);
    // localStorage只能存字符串，所以转成布尔值判断
    const isDown = localStorage.getItem(btnId) === 'true';
    if(isDown) {
      btn.classList.add('fa-thumbs-down');
    }
  }
});

function myFunction(x) {
  // 切换点踩样式类
  const isToggled = x.classList.toggle("fa-thumbs-down");
  // 用按钮ID作为key，将状态存入localStorage
  localStorage.setItem(x.id, isToggled.toString());
}

CSS（无需改动） #

.fa {
    font-size: 50px;
    cursor: pointer;
    user-select: none;
    color: red;
  }
  
  .fa:hover {
    color: rgb(12, 139, 0);
  }

核心逻辑说明： #

• 每个按钮的唯一ID是区分状态的关键，确保localStorage能精准对应每个按钮的状态
• 页面加载时通过DOMContentLoaded事件触发状态恢复，避免DOM未渲染完成时操作元素
• localStorage仅支持存储字符串，所以需要把布尔状态转成字符串存入，读取时再转成布尔值判断

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