将本地存储数据填充到 HTML 表中？答案

【问题标题】：Populating local storage data to an HTML table?将本地存储数据填充到 HTML 表中？
【发布时间】：2019-11-23 19:06:20
【问题描述】：

在创建游戏并实现分数等之后，我已将当前登录玩家的用户名连同他的分数一起保存到本地存储中。

/*Saves current logged in player to local storage*/
let player = sessionStorage.getItem("loggedInUsername");

function savePlayer(){
    /*sets logged in player + score + time*/
    let Player = [player, score];
    localStorage.setItem("Player",Player.toString());
}

然后我在游戏结束后调用该函数。我还在 HTML 中创建了一个高分表，如下所示：

<body class = "score">

    <article>

        <!-- Table for TopScores -->

        <table align = "center">
            <tr>
                <td id= "title" colspan = "3"><h1>Top Scores</h1></td>
            </tr>
            <tr>
                <th>Username</th>
                <th>Score</th>
                <th>Time</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>0</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>0</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>0</td>
            </tr>
        </table>
</article>
</body>

我无法使用 localStorage.getItem 调用玩家的用户名和他的分数到高分表。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以从javascript创建表格行数据，在jsfiddle链接（https://jsfiddle.net/59u4ba0d/）的代码sn-p下面找到：

HTML：

<table>
 <tbody id="tbody"></tbody>
</table>

Javascript：

var testObject = [{ 'name': 'James', 'score': 90, 'time': '16:00' }, { 
'name': 'Robert', 'score': 80, 'time': '15:00' }];
localStorage.setItem('testObject', JSON.stringify(testObject));

var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

var tbody = document.getElementById('tbody');

for (var i = 0; i < retrievedObject.length; i++) {
  var tr = "<tr>";
  tr += "<td>Name</td>" + "<td>" + retrievedObject[i].name + "</td></tr>";
  tr += "<td>Score</td>" + "<td>" + retrievedObject[i].score + "</td></tr>";
  tr += "<td>Time</td>" + "<td>" + retrievedObject[i].time + "</td></tr>";
  tbody.innerHTML += tr;
}

【讨论】：

这是工作代码，如果您无法访问localStorage / sessionStorage，请查看这篇文章启用并重试：help.trello.com/article/1093-enabling-localstorage