Question

我有一个此类项目来构建用户注册和登录表单，该表单使用本地存储来存储数据。如果有新用户注册，它会将其电子邮件地址和密码存储在localStorage中，该存储将按预期工作。

但是我发现当未注册的用户尝试登录和已注册的用户尝试登录时，很难比较数据。

如果用户已注册并尝试登录，则应将输入值与localStorage中存储的数据进行比较，并警告“登录成功”，否则警告“未注册用户”。

我正在使用JavaScript进行此操作。非常感谢您的帮助。

这是代码：

var userData;
var usersr;
var loginData;
var usersl;
// For user registration 
const registerBtn = document.getElementById('register-btn')

function UserRegistration() {
  userData = [{
    email: document.getElementById('register-email').value
  }, {
    password: document.getElementById('register-pass').value
  }];
  usersr = JSON.parse(localStorage.getItem('Users')) || [];
  usersr.push(userData);
  localStorage.setItem('Users', JSON.stringify(usersr));
  location.reload()
  console.log(userData)
}
// For user login 
const loginBtn = document.getElementById('login-btn')

function loginUser() {
  usersl = JSON.parse(localStorage.getItem('UsersLogin')) || [];
  loginData = [{
    loginEmail: document.getElementById('login-email').value
  }, {
    loginPass: document.getElementById('login-pass').value
  }];
  usersl.push(loginData)
  localStorage.setItem('UsersLogin', JSON.stringify(usersl))
  console.log(usersl)
  location.reload()
}

Answer 1

好，我已经将此代码进行了注册，现在您可以编写代码进行登录了，我已经处理了用户重复操作

<!DOCTYPE html>
<html lang="en-us"></html>
<head>
  <meta charset="utf-8">
  <title>Register</title>
  <style>
  </style>
</head>
<body>

  <form onsubmit="return false">
    <input type="email" placeholder="email"><br>
    <input type="password"><br>
    <input type="submit" value="register">
  </form>

  <script>
    var emailElement = document.querySelector("[type='email']"),
      passwordElement = document.querySelector("[type='password']");

    if(!localStorage["UsersAuth"]) {
      localStorage["UsersAuth"] = "{}";
    }

    document.querySelector("[type='submit']").onclick = function() {
      var registeredUsers = JSON.parse(localStorage["UsersAuth"]);
      if(emailElement.value in registeredUsers) {
        alert("This email is already registered!");
      }else {
        registeredUsers[emailElement.value] = passwordElement.value;
      }
      localStorage["UsersAuth"] = JSON.stringify(registeredUsers);
    }
  </script>
</body>
</html>

Answer 2

其中有很多不必要的代码。您可以使用以下功能使其正常工作：

function userRegistration() {
    const userData = {
        email: document.getElementById('register-email').value,
        password: document.getElementById('register-pass').value
    };
    localStorage.setItem('UsersLogin', JSON.stringify(userData));
    window.location.reload();
}

function loginUser() {
    const loginEmail = document.getElementById('login-email').value
    const loginPass = document.getElementById('login-pass').value
    if (localStorage.getItem('UsersLogin')) {
        const loginDeets = JSON.parse(localStorage.getItem('UsersLogin'))
        if (loginEmail === loginDeets.email && loginPass === loginDeets.password) {
            console.log('Login successful')
        } else {
            console.log('Wrong credentials')
        }
    } else {
        console.log('Not a registered user')
    }
}

在此登录功能中，您首先需要检查UsersLogin中甚至还有一个localStorage属性。如果存在，则检查输入是否与该UsersLogin属性中存储的内容匹配。如果匹配，则说“登录成功”，如果不匹配，则说“错误的凭证”。如果UsersLogin中根本没有localStorage属性，请说“不是注册用户”。

根据要求更新：

如果要将先前注册的用户保留在localStorage中，而只需更新UsersLogin属性以包括新注册的用户，则可以这样做：

function UserRegistration() {
    let storedUsers = localStorage.UsersLogin ? JSON.parse(localStorage.UsersLogin) : [];
    const userData = {
        email: document.getElementById('register-email').value,
        password: document.getElementById('register-pass').value
    };
    storedUsers.push(userData);
    localStorage.setItem('UsersLogin', JSON.stringify(storedUsers));
    window.location.reload();
}

function loginUser() {
    const loginEmail = document.getElementById('login-email').value
    const loginPass = document.getElementById('login-pass').value
    if (localStorage.getItem('UsersLogin')) {
        const allStoredUsers = JSON.parse(localStorage.getItem('UsersLogin'));
        const matchedUser = allStoredUsers.filter(user => {
            return loginEmail === user.email && loginPass === user.password;
        })
        if (matchedUser.length) {
            console.log('Login successful')
        } else {
            console.log('Wrong credentials')
        }
    } else {
        console.log('Wrong credentials') // Don't say "Not a registered user"
    }
}

注意：您可能必须清除localStorage才能使用新功能之所以可以工作，是因为localStorage.UsersLogin现在是以前的array 是object，因此如果不清除它可能会引发错误第一。只需在控制台中运行localStorage.clear()。

此外，我知道我是在第一段代码中完成此操作的，但是不要告诉用户是否存在用户配置文件（不要记录“非注册用户”），因为这是一个安全漏洞。它向用户提示谁在数据库中，谁不在数据库中。这对于黑客或恶意行为者而言是有价值的信息。相反，只需再次说“错误的凭据”即可。 ?

Answer 3

我认为您正在寻找类似的东西

// For user registration 
const registerBtn = document.getElementById('register-btn')

function UserRegistration() {
  var userData = {
    email: document.getElementById('register-email').value,
    password: document.getElementById('register-pass').value
  };
  var usersr = JSON.parse(localStorage.getItem('Users')) || [];
  if(!usersr.some(user => user.email === userData.email)) {
   usersr.push(userData);
   localStorage.setItem('Users', JSON.stringify(usersr));
   location.reload()
   console.log(userData)
  }
  else {
    //email already registered
  }
}

// For user login 
const loginBtn = document.getElementById('login-btn')

function loginUser() {
  var usersl = JSON.parse(localStorage.getItem('UsersLogin')) || [];
  var usersr = JSON.parse(localStorage.getItem('Users')) || [];
  var loginData = {
    loginEmail: document.getElementById('login-email').value,
    loginPass: document.getElementById('login-pass').value
  };
  var currentUser = usersr.filter(user => user.email === loginData.loginEmail);
  if(currentUser.length > 0) {
    //current email is registered
    if(currentUser[0].password === loginData.loginPass) {
      //password do not match 
      return;
    }
    if(!usersl.some(user => user.email === loginData.loginEmail)) {
      // currently not logged in, so login
      usersl.push(loginData);
      localStorage.setItem('UsersLogin', JSON.stringify(usersl))
      console.log(usersl)
      location.reload()
    }
    else {
      // currently logged in
    }
  }
  else {
    // not registered email
  }
}

如何检查用户是否在本地存储中

3 个答案: