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

Question

我为我的网站创建了一个注册和登录，并创建了一个表来存储用户的名字和姓氏，但我想在表中存储多个用户，但每次我更新表，每次新用户登录时它都会替换第一个用户。

点击链接查看图片：

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

您无法使用本地存储创建注册和登录系统。本地存储仅将值保存在用户自己的浏览器中，因此是“本地”。服务器不知道它们，其他用户不知道它们，如果用户彻底清除浏览器历史记录，它们都会被清除。每个给定的键只有一个值——如果你今天说username = "Sarah"，明天说username = "Laura"，那么劳拉会覆盖莎拉，因为用户的浏览器同时调用两个不同的东西是没有意义的username.

本地存储不适合注册和登录系统。它仅适用于为单个用户缓存内容。例如，您可以将处理中/未发送的消息存储在本地存储中，这样用户就不会在页面刷新时丢失它们。