用localStorage结构化存储多级菜单点击路径对象（如{level1:"cat-001",level2:"cat-015",level3:"prod-102"}），页面加载时解析并逐级还原active状态，动态菜单需在DOM渲染完成后执行，支持多区域独立存储与安全清理。
用 localStorage 记录用户对多级分类菜单的最后一次点击位置，核心是把“点击路径”结构化存为字符串，并在页面加载时还原高亮或展开状态。关键不在于存“哪个元素被点过”，而在于存“用户当前停留在哪一级、哪一项”，这样刷新后才能准确恢复视觉焦点。
确定并存储点击路径
多级菜单通常有层级关系（比如：行业 → 子类 → 具体产品）。每次点击某一项时，应向上收集完整路径，形成一个嵌套对象再序列化保存：
- 给每个菜单项添加唯一 data-id 或 id 属性，例如：
<li data-level="2" data-id="prod-102">智能手表</li> - 点击时，递归向上找到所有父级菜单项（如“消费电子”→“可穿戴设备”→“智能手表”），提取它们的 level + id 组合
- 构造路径对象，例如：
{ level1: "cat-001", level2: "cat-015", level3: "prod-102" } - 用
localStorage.setItem("menuLastPath", JSON.stringify(pathObj))保存
页面加载时还原选中状态
进入页面后，立即读取并解析该路径，逐级激活对应菜单项：
- 执行
const path = JSON.parse(localStorage.getItem("menuLastPath") || "{}") - 按 level1 → level2 → level3 顺序查找对应 DOM 元素，添加
class="active"或触发展开逻辑 - 若某级无对应项（如数据变更导致 ID 失效），跳过该级，不报错；只还原现存有效路径
- 建议配合 CSS 设置
.menu-item.active { font-weight: bold; background: #f0f8ff; }做视觉提示
处理动态菜单与清理时机
如果菜单内容由接口动态渲染，需确保 DOM 渲染完成后再执行还原逻辑：
立即学习“前端免费学习笔记（深入）”；
- 在菜单数据加载完成、DOM 插入完毕后（如 Vue 的
nextTick、React 的useEffect、原生 JS 的requestAnimationFrame或DOMContentLoaded后延时）再调用还原函数 - 用户切换模块、登出或进入无关页面时，可主动清除：
localStorage.removeItem("menuLastPath") - 如需支持多个独立菜单区域（如左侧导航+顶部分类栏），可用不同键名区分，例如
"navLastPath"和"topCatLastPath"
注意事项与兼容性
localStorage 只能存字符串，复杂结构必须 JSON 序列化；同时要注意边界情况：
- 首次访问或无历史记录时，
getItem返回null，需做空值判断，避免JSON.parse(null)报错 - IE8+ 支持 localStorage，但低版本需检测：
if (window.localStorage) { ... } - 不要存敏感信息（如用户身份），localStorage 不安全且无访问控制
- 单域名下总容量约 5MB，纯路径数据极小，无需担心溢出
