为菜单切换按钮设置状态持久化Cookie的技术实现问询

咱来搞定这个菜单切换的Cookie记忆需求，其实拆解下来就三步：封装Cookie操作函数、处理按钮点击时的Cookie更新、页面加载时根据Cookie恢复菜单状态。话不多说，直接上干货：

1. 封装Cookie操作工具函数 #

首先得有两个小函数，一个用来设置带有效期的Cookie，一个用来根据键名读取Cookie值，这样后面操作Cookie就不用重复写逻辑了：

// 设置Cookie，参数：键名、值、有效期天数
function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

// 根据键名获取Cookie值
function getCookie(name) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for(let i=0;i < ca.length;i++) {
    let c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

2. 绑定按钮点击事件，同步更新Cookie #

接下来给你的切换按钮绑定点击事件，每次点击时切换菜单的显示状态，同时把当前状态写入Cookie（有效期设为7天）：

<ul class="nav navbar-nav navbar-right">
  <li>
    <div class="navbar-btn btn-group">
      <!-- 给按钮加个id，方便后续获取元素 -->
      <a href="#" id="menuToggleBtn" class="btn btn-default">菜单切换</a>
    </div>
  </li>
</ul>

<script>
// 假设你的菜单元素有个id叫menuContainer，记得换成你项目里的真实选择器
const menu = document.getElementById('menuContainer');
const toggleBtn = document.getElementById('menuToggleBtn');

toggleBtn.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止a标签默认跳转行为
  
  // 切换菜单的显示/隐藏状态
  menu.classList.toggle('show');
  
  // 根据当前菜单状态设置Cookie值
  const isMenuOpen = menu.classList.contains('show');
  setCookie('menuStatus', isMenuOpen ? '1' : '2', 7);
});
</script>

注意：这里的show是控制菜单显示的样式类，要换成你项目里实际用的类名；menuContainer也要替换成菜单元素的真实id或选择器。

3. 页面加载时，根据Cookie恢复菜单状态 #

最后一步，页面加载完成后，读取Cookie值，把菜单恢复到用户上次操作的状态：

window.addEventListener('DOMContentLoaded', function() {
  const menuStatus = getCookie('menuStatus');
  if (menuStatus) {
    if (menuStatus === '1') {
      // Cookie值为1，显示菜单
      menu.classList.add('show');
    } else if (menuStatus === '2') {
      // Cookie值为2，隐藏菜单
      menu.classList.remove('show');
    }
  } else {
    // 如果没有Cookie，设置默认状态（比如默认隐藏）
    menu.classList.remove('show');
  }
});

这样一来，用户每次点击切换按钮，菜单状态都会被存在Cookie里，有效期7天；下次打开页面时，会自动根据Cookie值恢复上次的菜单状态啦～

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