时间戳

首页 > 解决方案 > 将本地存储数据填充到 HTML 表中？

javascript - 将本地存储数据填充到 HTML 表中？

问题描述

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

/*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 将玩家的用户名和他的分数调用到高分表。

任何帮助将非常感激。

标签： javascripthtmlcss

解决方案

您可以从 javascript 创建表格行数据，在下面找到 jsfiddle 链接的代码片段 ( https://jsfiddle.net/59u4ba0d/ )：

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

推荐阅读