如何缓存侧边菜单显示/隐藏状态？前端技术实现咨询

Great question! For persisting user preferences like sidebar visibility, the best place to store this setting in the browser is localStorage—it’s designed exactly for this kind of persistent, user-specific data that needs to survive browser restarts. Here’s how to integrate it into your existing code step by step:

Step 1: Add a Persistence Checkbox to Your HTML #

First, add a checkbox so users can opt in to saving their menu preference. Place it near your menu trigger for easy access:

<ul class="nav navbar-nav">
  <li>
    <a onclick="openNavLeft()">Menu</a>
    <!-- New checkbox for persistence -->
    <label style="margin-left: 10px;">
      <input type="checkbox" id="persistMenuState" onchange="togglePersistState()">
      Remember my menu state
    </label>
  </li>
</ul>
<!--- Left Sidenav Content --->
<div id="SideNavLeft" class="sidenav sidenav_left">
 <div class="top-block-side-nav">
 <a href="javascript:void(0)" class="closebtn" onclick="closeNavLeft()">&times;</a>
 </div>
 <a href="#">
 <div class="menu_element">
 <div class="nav_icon" id="x"></div>
 <p class="menu_title">My Employee</p>
 </div>
 </a>
 <a href="#">
 <div class="menu_element">
 <div class="nav_icon" id="icon_vacation"></div>
 <p class="menu_title">Vacation</p>
 </div>
 </a>
 <a href="#">
 <div class="menu_element">
 <div class="nav_icon" id="x"></div>
 <p class="menu_title">Mis Envios</p>
 </div>
 </a>
 <a href="#">
 <div class="menu_element">
 <div class="nav_icon" id="x"></div>
 <p class="menu_title"> Setting</p>
 </div>
 </a>
</div>
<!--- EndLeft Sidenav Content --->

Step 2: Update Your JavaScript to Handle Persistence #

Modify your existing functions to save/load the menu state from localStorage, and sync with the checkbox:

// Restore saved state when the page loads
document.addEventListener('DOMContentLoaded', function() {
  const sideNav = document.getElementById("SideNavLeft");
  const persistCheckbox = document.getElementById("persistMenuState");

  // Load saved preferences from localStorage
  const savedMenuWidth = localStorage.getItem('sideNavLeftWidth');
  const shouldPersist = localStorage.getItem('persistMenuState') === 'true';

  // Set checkbox state to match saved preference
  persistCheckbox.checked = shouldPersist;

  // If persistence is enabled and we have a saved state, apply it
  if (shouldPersist && savedMenuWidth) {
    sideNav.style.width = savedMenuWidth;
  }
});

function openNavLeft() {
  const sideNav = document.getElementById("SideNavLeft");
  sideNav.style.width = "250px";
  
  // Save state only if persistence is enabled
  if (document.getElementById("persistMenuState").checked) {
    localStorage.setItem('sideNavLeftWidth', '250px');
  }
}

function closeNavLeft() {
  const sideNav = document.getElementById("SideNavLeft");
  sideNav.style.width = "0";
  
  // Save state only if persistence is enabled
  if (document.getElementById("persistMenuState").checked) {
    localStorage.setItem('sideNavLeftWidth', '0');
  }
}

// Handle checkbox toggle
function togglePersistState() {
  const persistCheckbox = document.getElementById("persistMenuState");
  const isChecked = persistCheckbox.checked;
  const sideNav = document.getElementById("SideNavLeft");

  // Save the persistence preference
  localStorage.setItem('persistMenuState', isChecked);

  if (isChecked) {
    // If enabling persistence, save the current menu state immediately
    localStorage.setItem('sideNavLeftWidth', sideNav.style.width);
  } else {
    // If disabling, clear the saved menu state (optional but clean)
    localStorage.removeItem('sideNavLeftWidth');
  }
}

Why localStorage? #

• Persistent: Data stays saved even after the user closes their browser or restarts their device.
• Easy to use: Simple key-value API that works in all modern browsers.
• User-specific: Each user’s setting is stored locally on their own device—no server-side storage needed for this preference.

If you only wanted the setting to last until the user closes the tab, you could use sessionStorage instead, but localStorage is the right choice for "remember my preference" functionality.

内容的提问来源于stack exchange，提问作者Maradilly