sessionstorage 可在多级菜单中记录展开/收起状态：以菜单唯一id或路径为key存取布尔值，支持嵌套层级；推荐批量读写menustate对象并校验有效性，配合vue/react生命周期同步状态。
SessionStorage 可以在多级菜单中记录每个菜单项的展开/收起状态，核心思路是：用唯一标识（如菜单 ID 或路径）作为 key，把布尔值或数组存进去，页面刷新后读取并还原状态。
用菜单唯一 ID 存储展开状态
给每级菜单节点分配一个稳定、可预测的 ID（比如 menu-user-management、menu-user-list），点击展开/收起时，用这个 ID 作为 key 写入 SessionStorage：
- 展开时：
sessionStorage.setItem('menu-user-management', 'true') - 收起时：
sessionStorage.setItem('menu-user-management', 'false') - 初始化时遍历所有菜单节点，读取对应 key，调用 toggle 方法还原状态
支持嵌套层级的路径式 key
对于深层嵌套（如「系统设置 > 权限管理 > 角色列表」），可用路径字符串作为 key，例如 "system/permission/role"，避免 ID 冲突或重复命名问题：
- 生成 key：把菜单的层级路径拼成斜杠分隔字符串，确保唯一且可追溯
- 存值：仍用
true/false，或统一转为字符串"1"/"0"保持类型一致 - 还原时，递归渲染菜单后，对每个有 path 属性的节点检查
sessionStorage.getItem(path)
批量读写 + 防止无效状态
不要每次点击都单独 setItem，建议集中管理一个对象缓存，减少 I/O 次数：
- 初始化时读取整个状态对象：
const state = JSON.parse(sessionStorage.getItem('menuState') || '{}') - 更新时修改对象属性，再一次性写回：
sessionStorage.setItem('menuState', JSON.stringify(state)) - 加个校验逻辑——如果菜单结构变了（比如某节点被移除），读取到的旧 key 应自动忽略，不报错也不影响其他节点
配合 Vue/React 组件的简单实践
在组件 mounted 或 useEffect 中读取并同步状态；在折叠/展开事件回调里更新 SessionStorage：
- Vue 示例：watch 菜单 openKeys，变化时更新 sessionStorage
- React 示例：用 useState + useEffect，openKeys 改变时触发
saveMenuState(openKeys) - 注意：SessionStorage 是页面级的，同源不同标签页互不影响，适合单页内状态延续
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
