可用 localstorage 实现菜单状态持久化：点击时存 id 对应的展开状态（如 "menu-report": true），加载时解析并还原；支持多级菜单独立 id、动态渲染后恢复、版本号自动清理及前缀批量清除。
可以用 localStorage 记录每个菜单项的展开/折叠状态，页面刷新后自动恢复，无需服务端参与。
监听菜单点击并保存状态
给每个可展开的菜单项（如 <li class="menu-item">）绑定点击事件，点击时切换其子菜单的显示状态，并将当前菜单的 ID 和状态存入 localStorage：
- 推荐用菜单容器的
data-id或id作为键名，例如"menu-dashboard": "expanded" - 使用
JSON.stringify()存布尔值或字符串更稳妥，如localStorage.setItem('menu-report', JSON.stringify(true)) - 注意：避免直接存 DOM 元素或函数，只存简单数据类型
页面加载时读取并还原状态
在 DOM 加载完成后（如 DOMContentLoaded 或 $(document).ready()），遍历所有菜单项，读取对应键值并设置初始展开状态：
- 用
JSON.parse(localStorage.getItem('menu-xxx'))安全解析，加?? false处理未设置情况 - 若值为
true，则调用展开逻辑（如添加active类、显示<ul></ul>子菜单） - 建议统一用 CSS 类控制显隐（如
.submenu.show），便于样式和 JS 分离
处理多级菜单与动态内容
如果菜单是异步加载或存在多层嵌套，需稍作增强：
- 对每级子菜单也分配唯一 ID（如
menu-report-sub1），独立记录状态 - 若菜单由 JS 动态生成，确保在插入 DOM 后再执行状态还原逻辑
- 可封装为函数
restoreMenuState()，在菜单渲染完成后再调用
可选：支持清除或重置状态
开发调试或用户主动重置时，提供清除机制：
- 添加按钮触发
localStorage.removeItem('menu-xxx')或localStorage.clear() - 生产环境慎用
clear()，建议按前缀批量删除，如遍历所有 key 并过滤menu-开头项 - 也可在 localStorage 中存一个版本号，升级菜单结构时自动清空旧状态
不复杂但容易忽略的是：要确保菜单 DOM 结构稳定（ID 或 data 属性不变），否则旧状态无法匹配新节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
