javascript - 将 HTML 本地存储中的项目获取到 HTML 表中

Question

这是我的注册页面的 JavaScript 代码，它将用户数据存储在 HTML 本地存储中。

function storeUserDetail(){
    var titleSelected = document.getElementById("titleInput").value;
    var fNameInput = document.getElementById("firstNameInput").value;
    var lNameInput = document.getElementById("lastNameInput").value;
    var genderSelected = document.getElementById("genderInput").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;
        document.getElementById("regMessage").innerHTML = "";
        localStorage[storeDetails.Username] = JSON.stringify(storeDetails);

如何从本地存储中获取项目，以便将用户的名字和姓氏存储到我的 HTML 表中？由于某种原因，当我使用时它不起作用:

var storeDetails = JSON.parse(localStorage[Username]);
var table = document.getElementById("rankTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = storeDetails.FirstName
cell2.innerHTML = storeDetails.LastName; 

我的表格存储在不同的页面上，可能这就是上面的代码不起作用的原因。这是我的 HTML 表格:

<table id="rankTable">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>

    <tbody>

    </tbody>
</table>

Answer 1

您将其存储为来自输入元素的用户名。因此，您需要获取该用户名才能检索它。

var Username = // ???
localStorage[Username]

因此，上述代码中的问号需要代表您获取该用户名的某种方式。有几种方法:

• 将其存储在 Cookie 中，并从那里检索它
• 将其单独存储在本地存储中，假设每台客户端计算机仅存储一个用户名。
• 询问用户的用户名。这将要求他们每次访问时都提供该信息。