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

时间:2017-11-20 12:58:27

标签: javascript local-storage

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

点击链接查看图片:

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;
}

1 个答案:

答案 0 :(得分:0)

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

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