时间戳

首页 > 解决方案 > 我如何记住在使用本地存储重新加载页面后切换了哪个类

javascript - 我如何记住在使用本地存储重新加载页面后切换了哪个类

问题描述

我有一个具有相同类的项目列表，每个项目都有一个按钮，单击时可以切换离线类。我使用 for 循环和 forEach 循环使用事件侦听器“单击”遍历列表，然后检查项目类列表是否包含“离线”。如果它包含离线，则按钮 innerText 更改为离线以及样式。现在的问题是当我重新加载页面时，一切都会重置。我试过使用本地存储，但它会将离线类恢复到每个项目。

let statusBtn = document.getElementsByClassName("statusBtn");
let status = localStorage.getItem("status");

// Array.prototype.forEach.call(statusBtn, (Btn) => {
//   Btn.addEventListener("click", () => {
//     Btn.classList.toggle("offline");
//     if (Btn.classList.contains("offline") == true) {
//       Btn.innerText = "Offline";
//       localStorage.setItem("status", "offline");
//     } else {
//       Btn.innerText = "Online";
//       Btn.classList.remove("offline");
//       localStorage.setItem("status", "online");
//     }
//   });
// });

for (let i = 0; i < statusBtn.length; i++) {
  statusBtn[i].addEventListener("click", () => {
    statusBtn[i].classList.toggle("offline");
    if (statusBtn[i].classList.contains("offline") == true) {
      statusBtn[i].innerText = "Offline";
      localStorage.setItem("status", "offline");
    } else {
      statusBtn[i].innerText = "Online";
      statusBtn[i].classList.remove("offline");
      localStorage.setItem("status", "online");
    }
  });
}

for (let i = 0; i < statusBtn.length; i++) {
  if (localStorage.getItem("status") === "offline") {
    statusBtn[i].innerText = "Offline";
    statusBtn[i].classList.add("offline");
  }
}
.offline {
  background: #f00;
  color: #fff;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <div id="inputContainer">
      <input type="text" name="search" id="myInput" placeholder="  Type The Store Name Here" />
    </div>
    <ul id="myUL">
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 935/932
            <button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> Anthos: Gauteng, Krugersdorp
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 873<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> Athlone: Westerncape, Athlone
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 1067<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> Arbour-Crossing: KwaZulu-Natal, Amazimtoti
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 1052<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> Amanzimtoti - KZN Amanzimtoti
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 927/950<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> Arcadia: Gauteng, Arcadia, Arcadia
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 889/891<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> Atteridgeville: Gauteng, Atteridgeville
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 1106<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> Avon-Wood: Western Cape, Avonwood
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 1159<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> Ballito: KwaZulu-Natal, Ballito
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 937<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> Beaufort West: Western Cape, Beaufort West
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 968/969<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> Bellville Mall: Western Cape, Kuilsriver
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 892<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> Benmore: No Collection
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 828/829<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> BirchAcres Mall: Gauteng, Thembisa
        </a>
      </li>
      <li>
        <a href="#">
          <div class="ext"> <i class="bi bi-arrow-right-circle"></i> Ext: 881<button class="float-end statusBtn">Online</button></div>
          <i class="bi bi-geo-alt-fill"></i> BlueDowns: Westerncape, BlueDowns
        </a>
      </li>
    </ul>
  </div>
  <script src="popup.js"></script>
</body>

</html>

标签： javascripthtmlcsslocal-storage

解决方案

您可以简单地添加一个索引并存储每个按钮的状态，您可以将每个按钮视为一个人的名字，因为如果您想可靠地存储每个人的详细信息，则没有两个人应该有相同的名字

    for (let i = 0; i < statusBtn.length; i++) {
        statusBtn[i].addEventListener("click", () => {
            statusBtn[i].classList.toggle("offline")

            if (statusBtn[i].classList.contains("offline") == true) {
                statusBtn[i].innerText = "Offline";
                localStorage.setItem("status_of_"+ i , "offline");
            } else {
                statusBtn[i].innerText = "Online";
                statusBtn[i].classList.remove("offline");
                localStorage.setItem("status_of_"+i , "online");
            }
        });
    }

    //LOAD STATE FROM STORAGE
    for (let i = 0; i < statusBtn.length; i++) {
        if (localStorage.getItem("status_of_"+i) === "offline") {
            statusBtn[i].innerText = "Offline";
            statusBtn[i].classList.add("offline");
        }
    }

推荐阅读