从 localStorage 中的数组中提取数据

Question

我有一个函数可以在注册期间从输入中获取数据并将其作为数据保存在数组中。现在我想要另一个函数在登录期间检查数据是否存在以及是否匹配。我怎样才能只使用 javascript 来做到这一点？简而言之，我需要一个功能来检查用户输入的数据是否存在，如果存在，则让他登录。

function saveData() {
  let name, email, password;
  name = document.getElementById("username").value;
  email = document.getElementById("email").value;
  password = document.getElementById("password").value;

  let user_records = new Array();
  user_records = JSON.parse(localStorage.getItem("users"))
    ? JSON.parse(localStorage.getItem("users"))
    : [];
  if (
    user_records.some((v) => {
      return v.email == email;
    })
  ) {
    alert("Email wykorzystany");
  } else {
    user_records.push({
      name: name,
      email: email,
      password: password,
    });
    localStorage.setItem("users", JSON.stringify(user_records));
  }
}

我知道这不是注册的正确方式。我这样做只是为了学习新事物。

Answer 1

function saveAndTestUser() {
  // here use const as they are not updated
  const name = document.getElementById("username").value;
  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;

  // Get all the records of the users
  // prefer camelcase : not a rule though but it's better this way
  const storedUsers = localStorage.getItem('users')

  // if there are no stored users then assign empty array 
  // so that we don't get unexpected errors
  const userRecords = storedUsers ? JSON.parse(storedUsers): []

  // Checking if email already exists
  if(userRecords.some(user => user.email === email)){
    alert("user already exists")
    return false; // stops the function execution
  }
  
  // If email doesn't exists then the code below will be executed
  // Similar to if-else
  // Add current record to existing records
  const newRecords = [...storedUsers, {name, email, password}] 

  // Set the new record to storage
  localStorage.setItem("users", JSON.stringify(newRecords));
 
}

Answer 2

这是一个基本的登录，当你确认邮箱和密码正确后，你就可以做任何你想做的事情了

function checkData() {
        const name = document.getElementById('username').value;
        const password = document.getElementById('password').value;

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

        if (
          user_records.find((user) => {
            return user.name == name && user.password == password;
          })
        ) {
          alert('Logged in');
          // do your things here
        } else {
            alert('wrong email or password');
          // do your things here
        }
      }

<input id="username" />
    <input id="password" />
    <input type="submit" value="submit" onClick="checkData()" />

额外：这是您只能出于学习目的而做的事情，即向本地存储添加一个键，例如：localStorage.setItem('loggedIn', true) 并在每个页面中设置一个检查值，如果是 true 显示页面，如果是 false 重定向到登录。在现实世界中，我们使用包含有关用户等所有信息的 JWT 令牌...您可以在 google 上搜索 JWT 令牌身份验证并了解它，这在前端世界中非常有用

从 localStorage 中的数组中提取数据

pull out data from array in localStorage

javascript

local-storage