如何在JavaScript中实现网页重载后保留元素CSS样式？默认显示需求的代码修正

我来帮你搞定这个问题！你的核心问题在于当前代码的逻辑有误：点击「Show completed」后，错误地把所有已完成条目的ID存入了localStorage，导致页面重载时loadItem函数会把这些条目再次隐藏。另外，默认情况下我们需要让已完成条目保持显示，只有在用户主动点击「Hide completed」后，重载才维持隐藏状态。

问题分析 #

1. 原showItem函数执行后，将所有completed类元素的ID存入localStorage，这直接导致loadItem加载时误隐藏这些元素。
2. 我们不需要存储具体的元素ID，而是应该存储是否需要隐藏已完成条目的状态，这样逻辑更简洁且能适配后续新增的条目。

修改后的完整代码 #

HTML部分（保持不变）

<body onload="loadItem()">
  <ol class="list-group">
    <li class="list-group-item completed" id="item-1">Text1</li>
    <li class="list-group-item completed" id="item-2">Text2</li>
  </ol>
  <button type="button" onclick="showItem();" class="btn btn-outline-primary">Show completed</button>
  <button type="button" onclick="hideItem();" class="btn btn-outline-primary">Hide completed</button>
</body>

JavaScript部分（核心修改）

function hideItem() {
  // 获取所有已完成条目
  var targList = document.getElementsByClassName("completed");
  // 隐藏每个条目
  for (var x = 0; x < targList.length; x++) {
    targList[x].setAttribute('style', 'display: none !important');
  }
  // 存储「需要隐藏已完成条目」的状态
  localStorage.setItem("hideCompleted", "true");
}

function loadItem() {
  // 读取本地存储的状态
  var shouldHide = localStorage.getItem("hideCompleted");
  // 只有当状态明确为"true"时，才隐藏条目
  if (shouldHide === "true") {
    var targList = document.getElementsByClassName("completed");
    for (var x = 0; x < targList.length; x++) {
      targList[x].setAttribute('style', 'display: none !important');
    }
  }
}

function showItem() {
  // 获取所有已完成条目
  var targList = document.getElementsByClassName("completed");
  // 移除行内样式，恢复默认显示状态
  for (var x = 0; x < targList.length; x++) {
    targList[x].removeAttribute('style');
  }
  // 存储「需要显示已完成条目」的状态
  localStorage.setItem("hideCompleted", "false");
}

逻辑说明 #

• 首次加载页面：localStorage中没有hideCompleted值，loadItem函数不会执行隐藏操作，已完成条目默认显示。
• 点击「Hide completed」：隐藏所有已完成条目，并将hideCompleted设为"true"，页面重载时会读取该状态并保持隐藏。
• 点击「Show completed」：移除条目的隐藏样式，恢复默认显示，并将hideCompleted设为"false"，页面重载时会保持显示状态。

这种方案不仅解决了你的问题，还能自动适配后续新增的completed类条目，不用再手动维护ID列表，逻辑更健壮。

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