JavaScript注册登录系统：如何存储变量供跨函数调用？

你的问题出在两个核心点：

1. 变量作用域与页面上下文丢失：register()里的user1、pass1是函数局部变量，函数执行完毕后就会被销毁；而且页面跳转到登录页后，原页面的所有内存变量都会被清空，login()自然找不到这些变量。
2. 错误获取输入内容：document.getElementById()返回的是DOM元素对象，不是输入框里的实际文本，必须用.value属性才能拿到用户输入的内容。

要实现跨页面的凭据存储，适合简易场景的方案是用浏览器的localStorage（持久化存储，数据会保留在浏览器中），修改后的代码如下：

修改后的注册函数 #

function register () {
    // 获取输入框的实际文本值
    var user1 = window.document.getElementById('username').value;
    var pass1 = window.document.getElementById('password').value;
    // 将凭据存入localStorage
    localStorage.setItem('registeredUser', user1);
    localStorage.setItem('registeredPass', pass1);
    alert('User registered, use your credentials to login');
    // 保留你的页面跳转逻辑，比如：
    // window.location.href = 'login.html';
}

修改后的登录函数 #

function login () {
    // 获取登录输入框的文本值
    let userL = window.document.getElementById('usernameL').value;
    let passL = window.document.getElementById('passwordL').value;
    // 从localStorage取出之前存储的凭据
    const savedUser = localStorage.getItem('registeredUser');
    const savedPass = localStorage.getItem('registeredPass');

    if (userL === savedUser && passL === savedPass) {
        alert(`${userL} successfully logged`);
    } else {
        alert('Invalid credentials');
    }
}

额外说明 #

• 如果不需要持久化存储（关闭浏览器后自动清空凭据），可以把localStorage换成sessionStorage，两者用法完全一致，只是sessionStorage的生命周期和浏览器会话绑定。
• 注意：这个方案仅为简易演示，真实项目绝对不能明文存储密码，必须对密码进行哈希加密后再存储。

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