基于localStorage的用户注册/登录功能异常：preventDefault()失效及登录验证失败

• 现有主HTML页面、用户注册页、登录页，使用localStorage存储用户数据，希望用户登录后主页面能保持登录状态（尚未实现登出功能）
• 控制台提示无法读取第一个函数的preventDefault()属性
• 注册功能可正常存储用户名和密码，但登录页面无法完成验证
• 询问是否需要更换实现方式或调整代码

登录页面代码 #

<a href="index.html"><button id="knapp">hjem</button></a>
<br>
<br>
<br>

<form onsubmit="login()">
    <div id="form">
        <div>
            <label for="userName">Username</label>
            <br>
            <input id="name" name="name" type="text">
        </div>
        <br>
        <div>
            <label for="password">Password</label>
            <input id="password" name="password" type="password">
        </div>
        <br>
        <button id="submit" type="submit">Login</button>
        <p id="result">Welcome! please login</p>
        <a href="lagBruker.html">har du ikke bruker? lag her!</a>
    </div>
</form>

注册页面代码 #

<a href="index.html"><button id="hjem">hjem</button></a>
<br>
<br>
<br>

<form onsubmit="lagBruker(event)">
    <div id="form">
        <div>
            <label for="userName">Username</label>
            <br>
            <input id="name" name="name" type="text">
        </div>
        <br>
        <div>
            <label for="password">Password</label>
            <input id="password" name="password" type="password">
        </div>
        <br>
        <p id="result">trykk her for å opprette bruker</p>
        <button id="submit" type="submit">Lag Bruker</button>
        <a href="login.html">login her</a>
    </div>
</form>

JavaScript代码 #

注册函数 #

const lagBruker = e => {
let name = document.getElementById("name").value;
let password = document.getElementById("password").value;

let formData = JSON.parse(localStorage.getItem('formData')) || [];

let exist = formData.length &&
JSON.parse(localStorage.getItem('formData')).some(data =>
    data.name.toLowerCase() === name.toLowerCase()
    );

    if (!exist) {
        formData.push({name, password});
        localStorage.setItem('formData', JSON.stringify(formData));
        document.querySelector('form').reset();
        document.getElementById('name').focus();
        alert("Bruker er opprettet! log inn med linken")
    } else {
        alert("noe feil har skjedd, har du allerede bruker?")
    }
    e.preventDefault();
}

lagBruker();

登录函数 #

const login = e => {
let name = document.getElementById("name").value;
let password = document.getElementById("password").value;

let formData = JSON.parse(localStorage.getItem('formData')) || [];
JSON.parse(localStorage.getItem('formData')) || [];
let exist = formData.length &&
JSON.parse(localStorage.getItem('formData')).some(data => data.name.toLowerCase() == name && data.password.toLowerCase() == password);
if(!exist){
    alert("inkorrekt")
}else{
    location.href = "index.html";
}
e.preventDefault();
}

login();

解决方案 #

1. 修复preventDefault()报错问题 #

• 问题根源：代码末尾直接调用lagBruker()和login()，此时没有传入事件对象e，导致e为undefined，无法读取preventDefault()属性。
• 解决：删除代码末尾的lagBruker();和login();调用，函数会通过表单onsubmit事件自动触发并传入事件对象。

2. 修复登录验证失败问题 #

• 问题根源：登录逻辑中仅将存储的用户名转小写，输入的用户名未转小写；同时重复解析localStorage数据，逻辑冗余。
• 调整后的登录函数：

const login = e => {
  // 输入内容统一转小写，避免大小写敏感问题
  let name = document.getElementById("name").value.toLowerCase();
  let password = document.getElementById("password").value.toLowerCase();

  let formData = JSON.parse(localStorage.getItem('formData')) || [];
  // 直接使用已解析的formData，避免重复读取localStorage
  let exist = formData.length && formData.some(data => 
    data.name.toLowerCase() === name && data.password.toLowerCase() === password
  );
  
  if(!exist){
    alert("用户名或密码错误")
  }else{
    // 存储当前登录用户状态
    localStorage.setItem('currentUser', JSON.stringify({name}));
    location.href = "index.html";
  }
  e.preventDefault();
}

3. 实现主页面保持登录状态 #

在主页面添加以下代码，页面加载时自动检查登录状态：

window.addEventListener('load', () => {
  const currentUser = JSON.parse(localStorage.getItem('currentUser'));
  if(currentUser){
    // 显示登录后的欢迎信息
    document.body.innerHTML += `<p>欢迎回来，${currentUser.name}！</p>`;
    // 添加登出按钮
    const logoutBtn = document.createElement('button');
    logoutBtn.textContent = "登出";
    logoutBtn.addEventListener('click', () => {
      localStorage.removeItem('currentUser');
      location.href = "login.html";
    });
    document.body.appendChild(logoutBtn);
  }else{
    // 未登录时自动跳转登录页
    location.href = "login.html";
  }
});

4. 优化注册函数（可选） #

减少重复解析localStorage数据，优化后代码：

const lagBruker = e => {
  let name = document.getElementById("name").value;
  let password = document.getElementById("password").value;

  let formData = JSON.parse(localStorage.getItem('formData')) || [];
  // 直接使用已解析的formData判断用户名是否存在
  let exist = formData.some(data => data.name.toLowerCase() === name.toLowerCase());

  if (!exist) {
    formData.push({name, password});
    localStorage.setItem('formData', JSON.stringify(formData));
    document.querySelector('form').reset();
    document.getElementById('name').focus();
    alert("用户已创建！请点击链接登录")
  } else {
    alert("操作失败，该用户名已存在")
  }
  e.preventDefault();
}

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