使用本地存儲來保持側邊欄的位置

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上不起作用，請參見此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>