在排名表中存储更多用户答案

【问题标题】：Storing more users in a ranking table在排名表中存储更多用户
【发布时间】：2017-12-09 21:31:05
【问题描述】：

我想在我的排名表上存储更多用户，并在表上显示他们的名字和姓氏。但是每次新用户注册时，它都会替换表上的第一个用户。我该如何解决？我创建了一个 JSFiddle Here

/* 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;
    var storeDetails = {};
    storeDetails.FirstName = fNameInput
    storeDetails.LastName = lNameInput
    storeDetails.Username = uNameInput
    storeDetails.Password = pWordInput
    localStorage[storeDetails.Username] = JSON.stringify(storeDetails);                  
}

/* Log In */
function loginUser() {
    var Username = document.getElementById("uNameInput").value;
    var Password = document.getElementById("pWordInput").value;
    var storeDetails = JSON.parse(localStorage[Username]);
    storeDetails.Username = document.getElementById("uNameInput").value;
    storeDetails.Password = document.getElementById("pWordInput").value;
    localStorage.loggedInUser = Username;
}

/* Rankings Table */
function displayTable() {
    var getData = JSON.parse(localStorage[localStorage.loggedInUser]); 
    var highScoreTable = "<tr><th>First Name</th><th>Last Name</th></tr>\n";
    for(var key in localStorage) {
        if(key !== localStorage.loggedInUser) {
            highScoreTable += "<tr><td>" + getData.FirstName + "</td><td>" + getData.LastName + "</td></tr>";
        }
    } 
    document.getElementById('rankTable').innerHTML = highScoreTable;
}

【问题讨论】：

标签： javascript

【解决方案1】：

我认为getData 应该是一个函数。当 dispalyTable 是

时它对我有用

/* Rankings Table */
function displayTable() {
    var getData = function(key) { return JSON.parse(localStorage[key]); }
    var highScoreTable = "<tr><th>First Name</th><th>Last Name</th></tr>\n";
    for (var key in localStorage) {
        if (key !== 'loggedInUser') {
            var data = getData(key);
            highScoreTable += "<tr><td>" + data.FirstName + "</td><td>" + data.LastName + "</td></tr>";
        }
    }
    document.getElementById('rankTable').innerHTML = highScoreTable;
}

我更新了getData 并检查了key 与本地存储键'loggedInUser' 而不是值。也可以是if(localStorage[key] !== localStorage.loggedInUser)

https://jsfiddle.net/wapapzyd/

【讨论】：