JavaScript基于sessionStorage实现导航栏角色显隐的代码问题

算力阿峰

2026-9-2

代码问题排查

代码共有4处核心错误，导致权限逻辑无法按预期生效：

管理员判断条件语法错误：n == "username",admin 误用逗号运算符，实际判断逻辑完全失效，正确判断条件应为n === "admin"
普通用户分支末尾多了无效字符a，会触发JS语法错误，导致整个脚本中断执行
缺少元素显示状态重置逻辑：只处理了元素隐藏逻辑，没有在权限匹配时将对应元素设为可见，会出现状态切换后元素仍保持之前隐藏状态的问题
HTML标签属性书写不规范：id="admission"target 属性和属性之间缺少空格，会导致浏览器解析id属性出错

修正后可直接运行的代码

HTML部分

<a href="#" id="admission" target="_self">Admissions</a>
<a href="#" id="status" target="_self">status</a>

JavaScript部分

// 读取存储的登录用户名
const currentUser = sessionStorage.getItem("username");
// 获取导航栏两个入口元素
const admissionNav = document.getElementById("admission");
const statusNav = document.getElementById("status");

// 先重置两个入口为可见状态，清除上一次状态的隐藏残留
admissionNav.style.display = "block";
statusNav.style.display = "block";

if (currentUser === null) {
  // 未登录：两个入口全部隐藏
  admissionNav.style.display = "none";
  statusNav.style.display = "none";
} else if (currentUser === "admin") {
  // 管理员账号：隐藏status入口，保留Admissions入口
  statusNav.style.display = "none";
} else {
  // 普通用户账号：隐藏Admissions入口，保留status入口
  admissionNav.style.display = "none";
}