用 localstorage 记住多级菜单折叠状态需为每项设唯一 data-menu-id，点击时存布尔值，加载时读取并还原 dom 状态；支持嵌套、跨页同步，纯原生 js 实现。
用 localStorage 记住多级菜单的折叠状态，核心是给每级可展开项分配唯一标识、操作时存布尔值、加载时还原 DOM 状态。不依赖框架，原生 JS 就能稳定实现。
为每个可折叠项设置唯一 ID
必须确保每个菜单项有稳定、可区分的 key，推荐用 data-menu-id 属性：
<li data-menu-id="products"> <span>产品</span><ul class="submenu">...</ul> </li><li data-menu-id="support"> <span>支持</span><ul class="submenu">...</ul> </li>
避免用动态生成的索引或 class 名作 key，否则 DOM 重排后状态错位。
点击时读取当前状态并写入 localStorage
监听菜单标题（如 <span></span> 或 <button></button>）的点击事件，切换对应子菜单显隐，并立即保存：
- 获取父
<li>的data-menu-id - 检查子
<ul class="submenu"></ul>是否已显示（例如：是否含open类，或offsetHeight > 0） - 计算新状态：
const newState = !wasOpen - 执行
localStorage.setItem(`menu_${id}_open`, JSON.stringify(newState))
页面加载时批量还原状态
在 DOMContentLoaded 后遍历所有带 data-menu-id 的菜单项，读取并应用存储值：
- 对每个
<li data-menu-id="xxx">，读取localStorage.getItem(`menu_xxx_open`) - 若值为
"true"，添加open类、移除collapsed类；否则反向操作 - 确保 CSS 中定义了
.open .submenu { display: block; }和.collapsed .submenu { display: none; }（或配合max-height做过渡）
未命中 key 时默认收起，安全且符合用户预期。
兼容嵌套与跨页同步（可选增强）
多级菜单常存在父子嵌套，但 localStorage 按 ID 存取天然支持任意层级：
- 父项
menu_products_open和子项menu_laptops_open互不干扰 - 需跨标签页同步？监听
storage事件，在其他页面中触发相同还原逻辑 - 例如：
window.addEventListener('storage', e => { if (e.key.startsWith('menu_') && e.key.endsWith('_open')) { restoreMenuState(e.key); } });
不需要额外库，也不必改结构，只靠标准 API 就能完成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
