jquery 如何在本地存储中保存折叠状态？

dldeef67 于 9个月前发布在 jQuery

关注(0)|答案(1)|浏览(110)

我有一个切换按钮，当点击按钮时，侧边栏将折叠，当再次点击切换按钮时，侧边栏将恢复正常。我想将状态保存在本地存储中，但我遇到了如何将状态保存在本地存储中的问题;我现在使用的方法不能保存状态。什么是正确的方法来存储状态在本地存储，以便当侧边栏折叠，页面重新加载，侧边栏还是会崩溃吗

<div id="sidebar"
    class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-sm-show sidebar" >
  <button id="header-toggler" 
      class="c-sidebar-minimizer c-class-toggler header-toggler" 
      type="button" data-target="_parent" data-class="c-sidebar-minimized">
  </button>
  <div class="c-sidebar-brand maximized">
    <img style="max-width: 100px;" 
        src="{{asset('images/brand/logo-text-white.png') }}" alt="GhoCalls Logo">
  </div>
  <div class="c-sidebar-brand minimized">
    <img style="max-width: 56px;" 
        class="p-1" src="{{asset('images/brand/logo-white.png') }}" 
        alt="GhoCalls Logo">
  </div>
  <ul class="c-sidebar-nav">
    <li class="c-sidebar-nav-item">
      <a class="c-sidebar-nav-link" href="#">
        <div class="mr-4 icon">
          <i class="fas fa-tachometer-alt"></i>
        </div>
        Dashboard
      </a>
    </li>
  </ul>
</div>

个字符

jquery

来源：https://stackoverflow.com/questions/77656574/how-to-save-collapsed-state-in-local-storage

1条答案

按热度按时间

mm9b1k5b1#

点击后更改类

在click事件中，类永远不会改变，因此if条件永远不会改变，因此localStorage永远不会改变。
在localStorage.setItem的行之前添加一行更新类：

headerToggle.addEventListener("click", function () {

    // NEW
    // SET STATE - UI
    sidebarArea.classList.toggle("c-sidebar-minimized");

    // SET STATE - localStorage
    if (sidebarArea.classList.contains("c-sidebar-minimized")) {
        localStorage.setItem("collapsed", "true");
    } else {
        localStorage.setItem("collapsed", "false");
    }
        
});

字符串

赞(0）回复(0）举报 9个月前

我来回答

jquery 如何在本地存储中保存折叠状态？

1条答案

点击后更改类

相关问题

热门标签

最新问答