问使用局部存储保持侧边栏的位置

EN

$('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>

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")
  }
}