localStorage登录验证失效及main函数重复执行问题求助

看起来你在基于 localStorage 实现用户注册登录功能时遇到了几个头疼的问题，我来帮你一步步拆解解决：

核心问题梳理 #

你当前面临的三个关键问题是：

1. 登录表单的 e.preventDefault() 完全失效，提交时直接用 GET 跳转
2. main() 函数被执行了两次
3. 登录验证功能根本没起作用

1. 先解决 main() 执行两次的问题 #

从你贴的代码来看，你通过 DOMContentLoaded 触发 main()，但如果页面里存在重复绑定该事件、或者有其他地方手动调用了 main()，就会导致它执行两次。

你可以先在 main() 开头加一行日志确认：

function main (){ 
  console.log("main 函数执行了一次"); // 加这行看控制台输出次数
  // 你的原有代码...
}

排查方向：

• 检查页面是否有重复的 document.addEventListener("DOMContentLoaded", main) 代码
• 确认没有其他脚本或逻辑手动调用了 main()

2. 修复登录表单 preventDefault() 失效的问题 #

这是导致登录验证失效的核心原因！你的代码里用了 else if 判断，这意味着如果页面同时存在注册按钮（#submeter）和登录按钮（#login-botao），只会执行第一个匹配的分支，登录表单的事件绑定代码根本不会被执行！

解决方案：把 else if 改成独立的 if 判断 #

function main (){ 
  var registo = document.getElementById("submeter"); 
  var login_id = document.getElementById("login-botao"); 
  console.log(login_id); 

  // 注册表单逻辑：不管登录元素是否存在，只要注册元素存在就绑定
  if(registo != null) { 
    registo.addEventListener("click", criar_conta); 
    $("#registo").submit(function(e) { 
      e.preventDefault(); 
    }); 
  } 

  // 登录表单逻辑：独立判断，不再依赖注册元素的存在
  if(login_id != null) { 
    login_id.addEventListener("click", login); 
    $("#login").submit(function(e) { 
      e.preventDefault(); 
    }); 
  } 
}

document.addEventListener("DOMContentLoaded", function(event) {main()});

额外优化：简化事件绑定逻辑 #

其实你不需要同时绑定按钮的 click 和表单的 submit，直接绑定表单的 submit 事件更可靠（比如用户按回车键也会触发提交）：

if(login_id != null) { 
  $("#login").submit(function(e) { 
    e.preventDefault();
    // 直接在这里执行登录逻辑，不用单独绑定按钮点击
    login();
  }); 
}

3. 修复登录验证功能 #

解决了默认提交行为的问题后，再检查你的 login() 函数逻辑：

• 确保从 localStorage 获取用户数据时用了 JSON.parse()（因为 localStorage 只能存字符串）：

  const registeredUsers = JSON.parse(localStorage.getItem("users")) || [];
  

• 确认你正确获取了登录输入框的值，用 console.log() 打印排查：

  function login() {
    const username = document.getElementById("login-username").value;
    const password = document.getElementById("login-password").value;
    console.log("输入的用户名：", username, "密码：", password); // 确认值是否正确
    // 后续验证逻辑...
  }
  

• 验证逻辑要遍历用户数组，匹配用户名和密码：

  const matchedUser = registeredUsers.find(user => user.username === username && user.password === password);
  if(matchedUser) {
    alert("登录成功！");
    localStorage.setItem("currentUser", JSON.stringify(matchedUser));
  } else {
    alert("用户名或密码错误！");
  }
  

额外建议 #

• 尽量统一使用原生 JS 或 jQuery，混写虽然可行，但统一风格更易维护
• 操作 localStorage 时，一定要用 JSON.stringify() 存对象/数组，用 JSON.parse() 取数据
• 多在关键逻辑节点加 console.log()，快速定位数据是否正确

内容的提问来源于stack exchange，提问作者Miguel Santana