Local Storage无法留存类切换状态及已存值应用失败问题

我来帮你搞定这两个困扰！先拆解下你代码里的核心问题，再给出修正方案：

问题分析 #

• 存储逻辑偏差：你现在存的是#xyz元素的完整className（比如xyz red），但实际我们需要的是「是否启用了red类」的状态，而不是某个元素的类名组合，这会导致后续调用时逻辑混乱。
• 未触发状态恢复：你写了apply函数，但页面加载时没有调用它，Local Storage里的值根本没机会生效。

修正后的完整代码 #

1. 重构点击事件：存储状态而非类名 #

// 绑定按钮点击事件
document.querySelectorAll("#abc, #xyz").forEach(btn => {
  btn.addEventListener("click", () => {
    const targetElements = document.querySelectorAll(".dog,.cat, #abc, #xyz");
    // 同步切换所有目标元素的red类
    targetElements.forEach(el => el.classList.toggle("red"));
    // 存储当前red类的激活状态（用第一个元素的状态代表整体，因为所有元素同步切换）
    const isRedActive = targetElements[0].classList.contains("red");
    localStorage.setItem("vovo", isRedActive.toString());
  });
});

2. 修复状态恢复函数：按需添加/移除类 #

function applySavedState() {
  const savedState = localStorage.getItem("vovo");
  if (savedState !== null) {
    const isRedActive = savedState === "true";
    const targetElements = document.querySelectorAll(".dog,.cat, #abc, #xyz");
    targetElements.forEach(el => {
      // 根据存储的状态，精准控制red类的添加/移除
      isRedActive ? el.classList.add("red") : el.classList.remove("red");
    });
  }
}

// 页面DOM加载完成后自动执行状态恢复
window.addEventListener("DOMContentLoaded", applySavedState);

关键改进点 #

• 存储更可靠：用布尔值的字符串形式（"true"/"false"）记录状态，避免因元素默认类名导致的混乱。
• 状态恢复精准：不再盲目添加存储的类名，而是根据状态决定添加或移除red类，确保状态完全匹配上次操作。
• 自动触发恢复：通过DOMContentLoaded事件，页面一加载就自动执行状态恢复，无需手动触发。

测试一下：点击按钮切换red类，刷新页面后，元素的red类状态应该和上次操作一致啦！

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