在表中存储用户的名字和姓氏

Question

I've created a register and login for my website, and I've created a table to store the users first name and last name, but I want to store more than one user in the table, but every time I update the table, it replaces the first user every time a new user logs in.

Click the link to view the images:

https://imgur.com/a/CFMC8

/*-- REGISTER --*/

function storeUserDetail(){
    var fNameInput = document.getElementById("firstNameInput").value;
    var lNameInput = document.getElementById("lastNameInput").value;
    var uNameInput = document.getElementById("userNameInput").value;
    var pWordInput = document.getElementById("passWordInput").value;
    if(fNameInput === ""){
        document.getElementById("regMessage").innerHTML = "<span 
        class='error'>Please enter your First Name.</span>";
    }
    else if(lNameInput === ""){
        document.getElementById("regMessage").innerHTML = "<span 
        class='error'>Please enter your Last Name.</span>";   
    }
    else if(uNameInput === ""){
        document.getElementById("regMessage").innerHTML = "<span 
        class='error'>Please enter your Username.</span>";   
    }
    else if(pWordInput === ""){
        document.getElementById("regMessage").innerHTML = "<span 
        class='error'>Please enter your Password.</span>";   
    }
    else {
        var storeDetails = {};
        storeDetails.FirstName = 
        document.getElementById("firstNameInput").value;
        storeDetails.LastName = 
        document.getElementById("lastNameInput").value;
        storeDetails.Username = 
        document.getElementById("userNameInput").value;
        storeDetails.Password = 
        document.getElementById("passWordInput").value;
        localStorage[storeDetails.Username] = JSON.stringify(storeDetails);
        window.location.replace("http://localhost/login.php");
    }                    
}

/*-- LOGIN -- */

function loginUser(){
    var Username = document.getElementById("userNameInput").value;
    var Password = document.getElementById("passWordInput").value;
    if(Username === ""){
        document.getElementById("logMessage").innerHTML = "<span 
        class='error'>Please enter your Username.</span>";                   
    }
    else if(Password === ""){
        document.getElementById("logMessage").innerHTML = "<span 
        class='error'>Please enter your Password.</span>";     
    }
    else {
        if(localStorage[Username] === undefined) {
        document.getElementById("logMessage").innerHTML = "<span 
        class='error'>Username Incorrect. Please try again.</span>";
        return;
    }
    else {
        var storeDetails = JSON.parse(localStorage[Username]);
        if(Password === storeDetails.password) {
            localStorage.loggedInUserName = storeDetails.Username;
            window.location.replace("http://localhost/game.php");
        }
        else{
            document.getElementById("logMessage").innerHTML = "<span 
            class='error'>Password Incorrect. Please try again.</span>";
        }
    }
}

/* TABLE */

function inputUserInfo(){
    var storeDetails = JSON.parse(localStorage[localStorage.LoggedInUser]);
    var table = document.getElementById("rankTable");
    var row = table.insertRow();
    var firstNameCell = row.insertCell(0);
    var lastNameCell = row.insertCell(1);
    firstNameCell.innerHTML = storeDetails.FirstName;
    lastNameCell.innerHTML = storeDetails.LastName;
}

Answer 1

You can't create a registration and login system using local storage. Local storage only saves values in the user's own browser , thus 'local.' The server doesn't know about them, other users don't know about them, and they're all cleared a way if the user clears their browser history thoroughly. And there is only one value for each given key -- if you say username = "Sarah" today, and username = "Laura" tomorrow, then Laura overwrites Sarah, because it just doesn't make sense for the user's browser to have two different things both called username .

Local storage isn't suitable for registration and login systems. It's only suitable for caching things for an individual user. For example, you might store in-progress/unsent messages in local storage so the user doesn't lose them on a page refresh.