How to get multiple key values from array in local storage?

Question

I have a sign up form that asks for 6 details to create a user object, but I only need 2 of those details for a user to log in (username and password). I couldn't figure out how to only get those 2 values from an object (comprised of 6 values) in the local storage, so I've made a separate array that holds those 2 required values (userLogin) and only added that to the local storage.

In the log in form, I'm trying to get it to see if my username and password input matches what has been stored, however I'm getting "ne" in the console, indicating that its not recognising a match. I've tried numerous ways of doing it and wording it, but I can't seem to get it to work. I think the problem is that I'm not actually getting the items that I need, but I'm not entirely sure. Please have a look.

// Sign up page

const login       = document.querySelector(".login");
const loginSubmit = document.querySelector(".loginSubmit");

let users     = [];
let user      = {};
let userLogin = [];

signupForm.addEventListener("submit", (e) => {
  
  e.preventDefault();
  
  user = Object.fromEntries( [...document.querySelectorAll(".signup ul input")].map(e =>[e.name, e.value])); 

  users.push(user);
  userLogin.push(user.username);
  userLogin.push(user.password);

  localStorage.setItem('UserData', JSON.stringify(userLogin));
  console.log(localStorage);
});

// Log in page

const loginForm = document.querySelector(".login-form");

loginForm.addEventListener("submit", (e) => {
  let usernameInput = document.querySelector(".lg-username").value;
  let passwordInput = document.querySelector(".lg-password").value;
  e.preventDefault();
  if (localStorage.getItem("UserData")) {
    const dataUsername = JSON.parse(localStorage.getItem('UserData', 'username'));
    const dataPassword = JSON.parse(localStorage.getItem('UserData', 'password'));
    if(usernameInput === dataUsername && passwordInput === dataPassword) {
      console.log("ye");
    }else{
      console.log("ne");
    }
  }else{
    console.log("not regis");
  }

  console.log(localStorage)
});

html signup form:

<form class="join-form">
  <ul>
    <li><input type="text"     name="username" class="username" placeholder="Username"         required /></li>
    <li><input type="text"     name="fullname" class="fullname" placeholder="Full Name"        required /></li>
    <li><input type="email"    name="email"    class="email"    placeholder="Email Address"    required pattern=".+@gmail\.com"  /></li>
    <li><input type="text"     name="phone"    class="phone"    placeholder="Phone Number"     required /></li>
    <li><input type="text"     name="postcode" class="postcode" placeholder="Post Code"        required /></li>
    <li><input type="password" name="password" class="password" placeholder="Enter a password" required /></li>
  </ul>
  <input type="submit" class="signupSubmit"> 
</form>

html log in form:

<form class="login-form">
  <ul>
    <li><input type="text"     name="username" class="lg-username" placeholder="Username" required></li>
    <li><input type="password" name="password" class="lg-password" placeholder="Password" required></li>
  </ul>
  <input type="submit" class="loginSubmit">
</form>

Answer 1

I couldn't quite figure out the way I wanted to do it, but instead of finding an item in a list in the local storage, I had it search the string in the local storage and see if it matched the user inputs. Like so:

// Sign up page; stores user input

const login = document.querySelector(".login");
const loginSubmit = document.querySelector(".loginSubmit");

let users = [];
let user = {};
let userLogin = [];

signupForm.addEventListener("submit", (e) =>{
    
    e.preventDefault();
    
    user = Object.fromEntries( [...document.querySelectorAll(".signup ul input")].map(e =>[e.name, e.value])); 

    users.push(user);
    userLogin.push(user.username);
    userLogin.push(user.password);

    signupForm.innerHTML = `Thank you for joining ${user.fullname}!`;
    signupForm.style.fontSize = '1.3rem';
    signupForm.style.fontFamily = 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif';
    signupForm.style.textAlign = 'center';
    signupForm.style.marginTop = '55%'; 
    signupForm.style.fontWeight = 'bold';
    
    localStorage.setItem('UserData', JSON.stringify(userLogin));
    console.log(localStorage);
});

// Log in page; matches user input to sign up storage

const loginForm = document.querySelector(".login-form");

loginForm.addEventListener("submit", (e) => {
    let usernameInput = document.querySelector(".lg-username").value;
    let passwordInput = document.querySelector(".lg-password").value;
    let loginData = [];
    e.preventDefault();

    if (localStorage.getItem("UserData")) {
        loginData.push(usernameInput);
        loginData.push(passwordInput);

        const signupData = JSON.parse(localStorage.getItem('UserData'));
        if(signupData.includes(usernameInput && passwordInput)) {
            console.log("ye");
        }else{
            console.log("ne");
        }
    }else{
        console.log("not regis");
    }
});

Answer 2

Your answer is nearly correct.

Take this example:

localStorage.setItem('UserData', JSON.stringify(['test-username', 'test-pw']));

This will set an array to localstorage with key of 'UserData'.

We can get the values like this.

const [username, password] = JSON.parse(localStorage.getItem('UserData'));

Answer 3

while you were updating your post, I found an old login code of mine

const loginForm = document.forms['login-form']  // use the form parent to refer each form elements 

 ////    -----------  init part on page load.  -----------   -----------

loginForm.reset()  // clear loginForm to set elements initial values="" (empty)

const
  loginDefault = JSON.stringify(Object.fromEntries(new FormData(loginForm).entries()))
, userLogin    = JSON.parse( localStorage.getItem('UserData') || loginDefault )
  ;
Object.entries(userLogin).forEach(([key,val])=>
  loginForm[key].value = val)          // set user form login values from local storage

////   -----------   -----------   -----------   -----------   -----------
 
 
loginForm.onsubmit = evt =>
  {
  // get user login values:
  Object.assign(userLogin, Object.fromEntries(new FormData(loginForm).entries()) )
  // savein localstorage:
  localStorage.setItem('UserData', JSON.stringify(userLogin))  

  // control part (only in testing) 
  console.clear() 
  console.log( loginForm.username.value, loginForm.user_psw.value  ) // access each element by his name
  console.log( JSON.stringify( userLogin ) )

  evt.preventDefault(); // just for testing disable page submit / and relaod
  }

if you want to test css + html

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
fieldset {
  margin : 2rem auto;
  width  : 12rem;
  }
legend {
  font-weight   : bold;
  font-size     : 1.4rem;
  margin-bottom : .2rem;
  }
fieldset *:not(legend) {
  display    : block;
  float      : left;
  clear      : both;
  margin-top : 0.2rem;
  }
fieldset label {
  margin-top : 0.8em;
  font-size  : .9rem;
  }
fieldset button {
  margin-top : 1.4rem;
  width      : 5.2rem;
  }
fieldset button:last-of-type {
  clear : none;
  float : right;
  }

<form name="login-form">
  <!-- have a name (or an id) here -->
  <fieldset>
    <legend> Login form </legend>

    <label>Name:</label>
    <input type="text" name="username" autocomplete="off"
            pattern="[A-Za-z0-9]{1,20}" placeholder="login name" 
            value="" required>

    <label>Password:</label>
    <input type="password" name="user_psw" 
            pattern="[A-Za-z0-9]{1,20}" placeholder="password" 
            value="">
<!--
    <label>4-digit PIN:</label>
    <input type="text" name="pinCode" autocomplete="off" 
          pattern="[0-9]{4}" placeholder="identification code"
          value="" required>
-->
    <button type="reset">clear</button>
    <button type="submit">Log In</button>
  </fieldset>
</form>