在用户切换菜单时需主动清除上个模块的sessionStorage数据，核心是按模块前缀命名键并切换前批量删除，如clearModuleCache("user")；可选进入新模块时先清空自身缓存，实现“进清+出清”双保险。
在用户切换菜单时清除上个模块的 sessionStorage 数据，核心思路是：**在跳转或切换前主动清理与当前模块无关的键值对**。sessionStorage 本身不会自动感知“模块”，需要你按业务逻辑约定键名规则，并在切换时手动删除。
约定清晰的缓存键命名规则
避免使用泛用键名（如 "data"、"temp"），改用带模块前缀的格式，例如：
- "userList_pageIndex"（用户列表模块的页码）
- "orderForm_draft"（订单表单模块的草稿）
- "report_filterConfig"（报表模块的筛选配置）
这样切换菜单时，就能通过前缀快速识别并批量清除。
在菜单切换前执行定向清除
假设你用的是前端路由（如 Vue Router、React Router 或原生 history API），在导航守卫或点击菜单项的处理函数中操作：
立即学习“Java免费学习笔记（深入）”；
- 记录上一个激活的模块名（例如 prevModule = "user"）
- 切换前遍历 sessionStorage，删除所有以 prevModule + "_" 开头的键
- 示例代码：
function clearModuleCache(moduleName) {
const prefix = moduleName + "_";
for (let i = sessionStorage.length - 1; i >= 0; i--) {
const key = sessionStorage.key(i);
if (key && key.startsWith(prefix)) {
sessionStorage.removeItem(key);
}
}
}
<p>// 切换菜单时调用（例如点击「订单管理」前）
clearModuleCache("user"); // 清除用户模块缓存
// 然后跳转...</p>可选：切换后自动初始化新模块缓存区
为防残留，也可在进入新模块时先清空自己可能遗留的旧数据：
- 进入「订单管理」时，先执行 clearModuleCache("order")
- 再加载新数据或设置初始状态，确保干净起步
- 这种“进清+出清”双保险适合多入口、状态易交叉的复杂场景
注意边界情况
sessionStorage 是页面级的，关闭标签页即销毁；但单页应用中，用户可能通过浏览器前进/后退返回旧模块——此时缓存仍存在。若需更严格的隔离，可结合路由路径监听（如 popstate）补充清理逻辑，或改用更可控的状态管理（如 Redux + 模块化 reducer）。
