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

【问题标题】：How to check if user exist in local storage如何检查用户是否存在于本地存储中
【发布时间】：2020-04-11 18:49:53
【问题描述】：

我有这个类项目来构建一个使用本地存储存储数据的用户注册和登录表单。如果新用户注册，它会将他们的电子邮件地址和密码存储在按预期工作的 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()
}

【问题讨论】：

您没有检查用户是否实际注册，以防止重复。

标签： javascript

【解决方案1】：

里面有很多不必要的代码。您可以使用这些功能使其工作：

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')
    }
}

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

根据要求更新：

如果您想将以前注册的用户保留在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()。

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

【讨论】：

还有一个问题@Ludolfyn，如何在本地存储中保持注册用户数据不变，以便新用户尝试注册以前注册的用户数据时仍然保留在那里。提前致谢。
完全没问题@SamsonUgwu ? 我根据您的要求更新了答案。希望对您有所帮助！
兄弟你三 (3) 多，谢谢你真的让我省了很多麻烦。@Ludolfyn。再次感谢。

【解决方案2】：

好的，我已经制作了这个代码来注册，现在你可以编写你的代码来登录了，我负责用户复制

<!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>

【讨论】：

【解决方案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
  }
}

【讨论】：