从 HTML 本地存储中获取项目到 HTML 表中答案

【问题标题】：Get items from HTML Local Storage into HTML Table从 HTML 本地存储中获取项目到 HTML 表中
【发布时间】：2017-12-09 21:30:08
【问题描述】：

这是我的注册页面的 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>

【问题讨论】：

您将项目设置为storeDetails.Username，但尝试将其设置为Username。尝试使用storeDetails.Username 来检索数据。或者为此使用常量值
能否举个代码例子

标签： javascript

【解决方案1】：

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

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

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

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

【讨论】：

var storeDetails = JSON.parse(localStorage[Username]); 我不能只更改此代码
在控制台上，它说用户名未定义。
@Muddy：不，Username 是您需要检索数据的“关键”，但用户的名称存储在数据中。这就像说当你的钥匙被锁在房子里时，你可以用你的钥匙来解锁你的房子。您需要密钥才能进入其余数据。因此，除非您拥有用户名，否则您无法访问数据。因此，您需要将其存储在某处或向用户索取。
如果我更改密钥怎么办？
@Muddy：不确定你的意思。 localStorange 是将键与值相关联的存储。因此，如果用户 "Muddy" 的数据使用密钥 "Muddy" 存储，则需要使用相同的密钥来检索该数据。