sessionstorage可保存多级菜单折叠/展开状态，需用语义化路径键（如menu:dashboard:submenu:reports）存储布尔值，dom渲染后读取还原，点击时实时写入字符串化状态，天然支持单次会话隔离。
SessionStorage 可以在单次页面会话中保存多级菜单的折叠/展开状态，关键在于用结构化键名记录每级菜单的开关状态，并在 DOM 渲染后同步还原。
用层级路径作为键名存储状态
避免用简单索引（如 menu-0）——它容易因 DOM 顺序变动失效。推荐使用语义化、稳定的路径标识，例如：menu:dashboard:submenu:reportsmenu:settings:submenu:profile:submenu:notifications
这样即使菜单项增删或重排，只要逻辑路径不变，状态依然准确对应。
初始化时读取并应用状态
菜单渲染完成后（如 Vue 的 mounted、React 的 useEffect 或原生 DOMContentLoaded 后），遍历所有可折叠菜单节点，按其路径键从 sessionStorage 读取布尔值：
- 存在且为
"true"→ 展开该菜单项（添加 active 类 / 设置 height / 切换 aria-expanded） - 存在且为
"false"→ 折叠 - 不存在 → 使用默认状态（通常折叠）
点击时实时更新 sessionStorage
监听菜单标题的点击事件，在切换视觉状态的同时，立即写入对应路径键：
- 用
sessionStorage.setItem(key, String(isExpanded))保存 - 注意：必须用
String()转成字符串，因为 sessionStorage 只存字符串 - 避免节流或防抖，确保每次点击都即时持久化
处理页面刷新与跨 tab 隔离
SessionStorage 天然满足“单次会话”要求：同一标签页内刷新不丢失，关闭标签页即清空，不同标签页互不影响。这正适合多级菜单的状态记忆场景——用户新开一个 tab 操作，不应干扰原 tab 的折叠习惯。
不需要额外清理逻辑，也不需监听 beforeunload；但若菜单支持深度链接（如 URL 带 hash），可在路由变化时主动读取 sessionStorage 并触发对应菜单展开，增强体验一致性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
