如何使用localStorage实现页面重载后保留toggle切换的offline类状态

数据老陈

2026-10-6

问题根因

你现在的代码只在localStorage里存了全局唯一的status值，任意按钮点击都会覆盖这个值，页面重载后判断只要这个值是offline就给所有按钮添加offline类，自然会出现全量更新的问题。你需要为每个按钮单独存储状态。

解决方案

我们可以给每个按钮分配唯一标识，将所有按钮的状态以对象形式存在localStorage里，实现每个按钮状态独立存储读取。无需修改HTML和CSS，仅替换JS代码即可：

const statusBtn = document.getElementsByClassName("statusBtn");
// 初始化状态存储，无历史数据则默认是空对象
const btnStatus = JSON.parse(localStorage.getItem("btnStatus") || "{}");

// 遍历按钮同时完成事件绑定和状态初始化
for (let i = 0; i < statusBtn.length; i++) {
  // 给按钮添加唯一索引标识
  statusBtn[i].dataset.index = i;
  // 页面加载时读取历史状态更新按钮样式
  if (btnStatus[i] === "offline") {
    statusBtn[i].classList.add("offline");
    statusBtn[i].innerText = "Offline";
  } else {
    statusBtn[i].classList.remove("offline");
    statusBtn[i].innerText = "Online";
  }
  // 绑定点击事件
  statusBtn[i].addEventListener("click", function() {
    const index = this.dataset.index;
    this.classList.toggle("offline");
    if (this.classList.contains("offline")) {
      this.innerText = "Offline";
      btnStatus[index] = "offline";
    } else {
      this.innerText = "Online";
      btnStatus[index] = "online";
    }
    // 最新状态序列化后存入localStorage
    localStorage.setItem("btnStatus", JSON.stringify(btnStatus));
  });
}