如何在JavaScript中通过登录表单获取LocalStorage中的用户数据？

嘿，你的注册功能已经跑起来了，那登录验证其实就是从LocalStorage里把存好的用户数据取出来做匹配就行，我给你一步步拆解怎么实现～

首先，你得先给登录表单准备好对应的DOM元素（假设你的登录表单用这些ID，你可以根据自己的实际代码调整）：

• 邮箱输入框：loginEmail
• 密码输入框：loginPassword
• 登录按钮：btn-login

接下来是登录验证的核心JavaScript代码，每一步我都加了注释，和你的注册逻辑完全对应：

// 获取登录表单的DOM元素
const loginEmail = document.getElementById("loginEmail");
const loginPassword = document.getElementById("loginPassword");
const btnLogin = document.getElementById("btn-login");

function login() {
    // 拿到用户输入的登录信息，用trim()去掉首尾空格避免无效输入
    const inputEmail = loginEmail.value.trim();
    const inputPassword = loginPassword.value.trim();

    // 第一步：先检查用户有没有空提交
    if (!inputEmail || !inputPassword) {
        return alert("请填写完整的邮箱和密码哦！");
    }

    // 第二步：从LocalStorage里取出之前注册的用户数组
    // 和你的注册逻辑一致，key是'users'，如果没有数据就返回空数组
    const registeredUsers = JSON.parse(localStorage.getItem('users')) || [];

    // 第三步：查找是否存在匹配的用户
    // 只需要比对邮箱和密码就行，不用管姓名
    const matchedUser = registeredUsers.find(user => 
        user.email === inputEmail && user.password === inputPassword
    );

    // 第四步：根据匹配结果给出反馈
    if (!matchedUser) {
        return alert("邮箱未注册或者密码输错啦！");
    }

    // 验证通过后的操作：比如跳转到首页、保存登录状态
    alert(`登录成功！欢迎回来，${matchedUser.firstName} ${matchedUser.lastName}！`);
    // 可以把当前登录的用户存在LocalStorage里，方便其他页面判断登录状态
    localStorage.setItem('currentUser', JSON.stringify(matchedUser));
    // 示例：跳转到首页页面
    // window.location.href = '/home.html';
}

// 给登录按钮绑定点击事件
btnLogin.addEventListener("click", login);

关键逻辑说明： #

• 字段校验：先拦截空输入，避免无意义的查找操作
• 读取存储数据：完全复用你注册时的LocalStorage key（users），确保数据来源一致
• 用户匹配：用find方法高效遍历用户数组，精准匹配邮箱和密码（注意：实际项目里绝对不能明文存密码，得用哈希算法加密后再存，这里只是演示基础逻辑）
• 登录状态处理：验证通过后，可以把当前用户信息存在LocalStorage的currentUser里，后续页面可以读取这个值判断用户是否已登录

小提示： #

你的注册代码里有个小笔误：const lastnName = document.getElementById("lastName"); 这里变量名多了个n，应该是lastName，虽然你说功能正常，但建议修正避免后续出现奇怪的bug～

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