登录后Log in按钮无法隐藏，使用localStorage未生效求解决

一、登录页面的核心问题 #

• 存储状态时机错误：window.location.href跳转代码放在了localStorage.setItem之前，页面跳转后后续代码不会执行，导致登录状态根本没存入localStorage。
• 循环与提示逻辑混乱：找到匹配用户后没终止循环，也没阻止错误提示输出，会出现“登录成功却打印错误信息”的情况。

修正后的登录页面代码：

var objPeople = [
  { username: "#", password: "#" },
  { username: "#", password: "#" },
  { username: "test", password: "123" }
];

function getInfo() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var isLoggedIn = false;

  for (var i = 0; i < objPeople.length; i++) {
    if (username === objPeople[i].username && password === objPeople[i].password) {
      console.log(username + " is logged in.");
      // 先存状态再跳转
      localStorage.setItem("signedIn", "1");
      window.location.href = "homepage.html";
      isLoggedIn = true;
      break; // 找到匹配用户后终止循环
    }
  }

  if (!isLoggedIn) {
    console.log("Username/password is incorrect.");
  }
}

二、首页的核心问题 #

• 用错localStorage方法：应该用getItem获取存储的状态，而不是setItem。
• 条件判断用了赋值操作：if (signedInTrue= 1)是赋值，不是比较，要换成严格相等===。
• 逻辑与需求完全相反：需求是隐藏按钮，当前代码是设置display: block（显示），要改成display: none；同时要处理未登录时的默认显示状态。
• 没做元素存在性校验：如果topNav元素不存在，会直接报错，需要先判断元素是否存在。

修正后的首页代码：

// 获取登录状态（localStorage存的是字符串，直接比较字符串即可）
const signedInStatus = localStorage.getItem("signedIn");
const loginButton = document.getElementById("topNav");

// 先确保元素存在再操作
if (loginButton) {
  // 已登录则隐藏按钮，未登录则显示
  if (signedInStatus === "1") {
    loginButton.style.display = "none";
  } else {
    loginButton.style.display = "block";
  }
}

额外提示 #

• localStorage只能存字符串，建议统一用字符串类型存储状态，避免类型转换问题。
• 退出登录时记得清除状态：localStorage.removeItem("signedIn")。

内容的提问来源于stack exchange，提问作者Andrés Mooser