How to create multiple login and registration form using JavaScript only and storing to the local server

Question

I need some help I have created a login and registration form and its stores its values to the local storage. This is for a class, how can I make it to accept more than one user. Right now it only takes one username and password.

Thanks in advance,

<!-- sign up form  -->
    <div class="container pt-5">

        <!-- registration form  -->
        <form id="register-form">
            <input id="uName" type="text" placeholder="Name" value="" />
            <input id="uPw" type="password" placeholder="Password" value="" />
            <input id="rgstr_btn" type="submit" value="get Account" onClick="store()" />
        </form>

        <!-- login form -->

        <form id="login-form" action="./index.html">
            <input id="userName" type="text" placeholder="Enter Username" value="" />
            <input id="userPw" type="password" placeholder="Enter Password" value="" />
            <input id="login_btn" type="submit" value="Login" onClick="check()" />
        </form>

    </div>


// Name and Password from the register-form

var name = [document.getElementById('uName')];
var pw = document.getElementById('uPw');

// storing input from register-form

function store() {
    localStorage.setItem('name', uName.value);
    localStorage.setItem('pw', uPw.value);
}

// check if stored data from register-form is equal to entered data in the login-form

function check() {

    // stored data from the register-form

    var storedName = localStorage.getItem('name');
    var storedPw = localStorage.getItem('pw');

    // entered data from the login-form

    var usrName = document.getElementById('userName').value;
    var usrPw = document.getElementById('userPw').value;

    // check if stored data from register-form is equal to data from login form

    if (userName.value == storedName && userPw.value == storedPw) {
        alert('You are logged in ' + usrName);
        location.replace("./index.html")

    } else {
        alert('Access denied. Valid username and password is required.');
    }

}

Answer 1

You would want to use an array of objects where each objects stores a username and password. However localStorage only stores strings, so the array needs to be encoded and decoded into a string, which can be done by JSON.

The check function would look like:

function check() {
    var usrName = document.getElementById('userName').value;
    var usrPw = document.getElementById('userPw').value;

    let stored_users = JSON.parse(localStorage.getItem('users'))
    if(stored_users) {
        for (let u = 0; u < stored_users.length; u++){
            if (usrName == stored_users[u].name && usrPw == stored_users[u].password) {
                alert('You are logged in ' + usrName);
                return location.replace("./index.html");

             }
        }
    } else {
        localStorage.setItem('users', '[]');
    }

    return alert('Access denied. Valid username and password is required.');
}

Then store would look like:

function store() {
    var usrName = document.getElementById('userName').value;
    var usrPw = document.getElementById('userPw').value;

    let stored_users = JSON.parse(localStorage.getItem('users'));
    if(stored_users) {
        stored_users.push({name: usrName, password: usrPw});
        localStorage.setItem('users', JSON.stringify(stored_users));
    } else {
        localStorage.setItem('users', JSON.stringify([{name: usrName, password: usrPw}]));
    }
}