使用 sessionStorage 保存菜单选中状态是一种轻量、会话级、无需后端参与的方案，适合刷新后恢复高亮且关闭标签页自动清除的场景。
在单页应用（SPA）中，使用 sessionStorage 保存当前选中的菜单项，是一种轻量、会话级、无需后端参与的状态管理方式。它适合用户刷新页面后仍需恢复导航高亮状态的场景，且关闭标签页即自动清除，符合“会话内持续”的预期。
1. 点击菜单时存入 sessionStorage
给每个菜单项（如 <a></a> 或 <button></button>）绑定点击事件，将唯一标识（如菜单的 id、data-key 或路由路径）写入 sessionStorage：
<nav> <a href="#/home" data-menu="home">首页</a> <a href="#/products" data-menu="products">商品</a> <a href="#/about" data-menu="about">关于</a> </nav>
JavaScript 中监听并存储：
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', function(e) {
const menuKey = this.dataset.menu;
if (menuKey) {
sessionStorage.setItem('activeMenu', menuKey);
}
});
});
2. 页面加载时读取并高亮对应菜单项
在 SPA 初始化或路由切换完成时（例如 hashchange 后、或 Vue/React 组件挂载时），从 sessionStorage 读取值，并为匹配的菜单项添加高亮类（如 active）：
立即学习“前端免费学习笔记（深入）”；
function setActiveMenu() {
const activeKey = sessionStorage.getItem('activeMenu');
// 移除所有 active 类
document.querySelectorAll('nav a').forEach(el => el.classList.remove('active'));
// 为匹配项添加 active 类
if (activeKey) {
const targetLink = document.querySelector(`nav a[data-menu="${activeKey}"]`);
if (targetLink) targetLink.classList.add('active');
}
}
// 页面加载后执行一次
setActiveMenu();
// 如果是基于 hash 的路由，监听变化
window.addEventListener('hashchange', setActiveMenu);
3. 注意与路由同步的时机和边界情况
确保菜单高亮状态与实际路由一致，避免“显示已选但内容未更新”或“内容已切换但菜单未高亮”：
- 若使用前端路由库（如 Vue Router、React Router），应在
onEachRouteChange或useEffect/onMounted中调用setActiveMenu()，并在设置新路由前先更新sessionStorage - 用户直接输入 URL 或刷新页面时，应优先以 URL 路径推导菜单项（如
location.hash === '#/products'→activeMenu = 'products'），再写入sessionStorage，保证状态权威性来自路由 - 不建议仅依赖
sessionStorage做唯一状态源；它更适合“视觉反馈缓存”，核心导航状态仍应由路由系统驱动
4. 清理与降级考虑
sessionStorage 本身无需手动清理，但可主动干预提升体验：
- 用户登出或切换账号时，调用
sessionStorage.removeItem('activeMenu')避免残留旧状态 - 增加容错：读取时检查值是否为字符串、是否在合法菜单列表中，避免因过期 key 导致无高亮
- 浏览器禁用或私密模式下
sessionStorage可能不可用，加一层 try/catch 并回退到默认高亮逻辑（如首页）
