Using HTML WebStorage to have multiple username and passwords

I am using WebStorage to make a simple login system with username/password. (I don't know if this is the best way.) It is working, but the problem is, it only works with one username and password. How do I make it so that it can store multiple usernames/passwords? Or perhaps I should be using a different system to do this? Code:

<html>
<head>
</head>
<body>
    <input type="text" placeholder="input username here" id="textbox">
    <input type="text" placeholder="input password here" id="textbox2">
    <input type="button" value="sign up" onclick="signup()">
    <br>
    <input type="text" placeholder="input username here" id="textbox3">
    <input type="text" placeholder="input password here" id="textbox4">
    <input type="button" value="login" onclick="login()">

    <p id="result"></p>

    <br>
    <br>
    <div id="settings">
        <h1>Settings</h1>
        <br>
        <input type="text" placeholder="background color" id="bgc">
        <br>
        <input type="button" onclick="changeSettings()" value="Change settings">
    </div>
    <script>
        function changeSettings() {
            if(loggedIn == true) {
                if(typeof(Storage)!= "undefined") {
                    var backg = document.getElementById("bgc").value;
                    if(backg!="") {
                        localStorage.setItem("backgroundColor", backg);
                        document.body.style.background = localStorage.getItem("backgroundColor");
                    } else {
                        alert("Enter a color.")
                    }
                } else {
                    alert("No support.")
                }
            } else {
                alert("You must be logged in to do that.")
            }
        }

        function loadSettings() {
            if(typeof(Storage)!="undefined") {
                document.body.style.background = localStorage.getItem("backgroundColor");
            } else {
                alert("No support.")
            }
        }

        function signup() {
            if(typeof(Storage)!= "undefined") {
                var username = document.getElementById("textbox").value;
                var password = document.getElementById("textbox2").value;
                if(username!="" && password!="") {
                    localStorage.setItem("username", username);
                    localStorage.setItem("password", password);
                } else {
                    alert("Please enter a valid username and password.")
                }
            } else {
                alert("No support.")
            }
        }

        function login() {
            if(typeof(Storage)!= "undefined") {
                var username = localStorage.getItem("username");
                var password = localStorage.getItem("password");
                var usernameInput = document.getElementById("textbox3").value;
                var passwordInput = document.getElementById("textbox4").value;
                if(usernameInput!="" && passwordInput!="") {
                    if(usernameInput == username && passwordInput == password) {
                        document.getElementById("result").innerHTML = "Logged in!";
                        loggedIn = true;
                        loadSettings();
                    } else {
                        document.getElementById("result").innerHTML = "Wrong password/username!";
                    }
                } else {
                    alert("Please enter a valid username and password.")
                }
            } else {
                alert("No support.")
            }
        }
    </script>
</body>
</html>

ps: sorry if it's messy :p

Solution

You should probably be using SQL if you want to store user inputs such as Usernames and Passwords.

Hashing & Password Storage

Good video to watch if your trying to learn Databases! :)