Question

我目前有一个简单的切换按钮，可以折叠/展开导航侧栏：

<div id="sidebar-wrapper" class="extend">
             <button class="collapse-toggle"></button>
   <ul>
     <li></li>
   </ul>
</div>

<script type="text/javascript">
    $('.collapse-toggle').on('click', function(e) {
    $('#sidebar-wrapper').toggleClass("extend collapsed"); //you can list several class names

    e.preventDefault();
     });
 </script>

我想使用本地存储来记住每次用户重新加载时菜单是折叠还是打开。每个本地存储教程/答案等都不太适合我的现有 JavaScript方法，用于折叠菜单，而我希望保留该菜单。

我该如何进行这项工作？

Answer 1

这是一个可行的示例：

if(!localStorage.getItem("toggle")) {
    // Check if theres anything in localstorage already
    localStorage.setItem("toggle", "true");
} else {
    if(localStorage.getItem("toggle") === "true") {
    // toggle was on, turning it off
    localStorage.setItem("toggle", "false");
  }
    else if(localStorage.getItem("toggle") === "false") {
    // toggle was off, turning it on
    localStorage.setItem("toggle", "true")
  }
}

https://jsfiddle.net/cwq4rvsy/25/

Answer 2

您可以通过在用户访问页面时读取localStorage中的值来实现。如果存在值，则将菜单设置为状态（打开或关闭）。如果不存在任何值，请从菜单中删除collapsed类。这也是最初加载页面时的修复方法。然后打开菜单。

在每个菜单切换上，状态都保存在localStorage中。当用户重新访问该页面时，将在localStorage中存储一个值，并根据状态显示菜单。

由于localStorage在Stack Overflow上不起作用，请参见this JSFiddle以查看其运行情况。这是代码的副本。

$('document').ready(function() {
  // Code responsible for setting localStorage and toggling when toggle button is clicked.
  $('.collapse-toggle').on('click', function(e) {
    // localStorage.setItem('menu-closed', !$('#sidebar-wrapper').hasClass('collapsed'));
    $('#sidebar-wrapper').toggleClass('collapsed');
  });

  // Code responsible for reading the state of the menu out of localStorage
  // var state = localStorage.getItem('menu-closed');
  var state = "false"  // simulate localStorage

  // When localStorage is not set, open the menu.
  if (state === null) {
    $('#sidebar-wrapper').removeClass('collapsed');
  } else {
    // When localStorage is set, Save the state to the variable closed
    // Here set closed to a boolean true/false value instead of a string "true" or "false"      	
    var closed = state === "true" ? true : false;

    // When the state of the menu is not closed, remove the collapsed class from the sidebar.
    if (!closed) {
      $('#sidebar-wrapper').removeClass('collapsed');
    }
  }
});

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

#sidebar-wrapper {
  background: #2c0963;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: all 0.3s;
}


/* Sidebar Collapse */

.extend {
  width: 260px !important;
}

.collapsed {
  width: 65px !important;
}

.collapse-toggle {
  margin-right: -31px;
  position: absolute;
  top: 0;
  background: none;
  border: none;
  width: 60px;
  font-weight: 300;
  line-height: 20px;
  font-size: 29px;
  right: 0px;
  z-index: 1600;
  opacity: 0.7;
  cursor: pointer;
}

.collapse-toggle:hover {
  cursor: pointer;
  opacity: 1;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<div id="sidebar-wrapper" class="extend collapsed">
  <button class="collapse-toggle">
      <span style="color:#25dbde; padding-right: 5px;">&#x2039;</span>        <span style="color:#d9d8d8; padding-left: 4px;">&#x203A;</span>
    </button>

  <ul id="menu">
    <li style="color: #fff;">Item 1</li>
  </ul>
</div>

使用本地存储来保持侧边栏的位置

2 个答案: