如何在JavaScript中使用本地存储并将存储的元素输出到表格？

Question

如何在JavaScript中使用本地存储并将存储的元素输出到表格？

javascripthtmlcss

3

我创建了一个“小游戏”，它只是一个反应测试器。你所要做的就是尽可能快地点击正方形和圆形。

现在我想添加一个播放按钮。当用户点击播放按钮时，会提示用户输入名称并存储。一旦用户开始玩，我想存储最高得分（最少时间），并在表格中显示它，就像排行榜一样。

我已经向我的朋友和当地的聚会团体寻求了很多建议，他们推荐我使用本地存储或JSON。我目前没有JSON的经验，那么我该如何创建这样的东西呢？

如果您对下面的代码有任何批评、建议、评论或改进意见，我将非常感激。

function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 15)];
  }
  return color;
}


var clickedTime;
var createdTime;
var reactionTime;

function makeBox() {

  createdTime = Date.now();

  var time = Math.random();
  time = time * 3000;

  setTimeout(function() {
    if (Math.random() > 0.5) {
      document.getElementById('box').style.borderRadius = "40px";
    } else {
      document.getElementById('box').style.borderRadius = "0px";
    }

    var top = Math.random();
    top = top * 300;

    var left = Math.random();
    left = left * 500;

    document.getElementById('box').style.top = top + "px";
    document.getElementById('box').style.left = left + "px";
    document.getElementById('box').style.backgroundColor = getRandomColor();
    document.getElementById('box').style.display = "block";

    createdTime = Date.now();
  }, time);
}

document.getElementById('box').onclick = function() {
  clickedTime = Date.now();
  reactionTime = (clickedTime - createdTime) / 1000;

  document.getElementById('time').innerHTML = reactionTime;
  this.style.display = "none";

  makeBox();
}

makeBox();

body {
  font-family: Verdana, Geneva, sans-serif;
}

.container {
  padding: 20px 20px;
  text-align: center;
  color: #204056;
}

#border {
  border: 1px solid black;
  border-color: #204056;
  background-color: #F1F2F2;
  width: 700px;
  height: 700px;
  position: fixed;
  margin-left: 30%;
}

#box {
  width: 80px;
  height: 80px;
  background-color: red;
  display: none;
  position: relative;
}

.bold {
  font-weight: bold;
  color: #46C9B6;
}

<div id="border">
  <div class="container">
    <h1>Test Your Reactions!</h1>

    <p>Click on the boxes and circles as quickly as you can.</p>

    <p class="bold">Your time: <span id="time">0</span>s</p>

    <div id="box">

    </div>
  </div>
</div>

- nastypluto

localStorage文档可能会有所帮助，以及这个教程。 - Maximillian Laumeister

localStorage.setItem('name','Dave'); ：将键名为'name'，键值为'Dave'的数据存储在本地存储中。 localStorage.getItem('name');：从本地存储中获取键名为'name'的数据。 - Jesse

localStorage 存储数据在用户浏览器中，因此在一台计算机上存储为 localStorage 的数据无法从另一台计算机上查看。 - Saumil

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Maximillian Laumeister · Accepted Answer

这里是一个快速的演示，展示如何使用HTML本地存储来保存高分列表，然后检索数据并将其放入表格结构中。演示脚本获取一份高分列表，将其存储到本地存储中，从本地存储中检索它，然后在表格中显示它。

由于Stack Snippet不支持localStorage，因此这里是一个JSFiddle演示代码的网址：https://jsfiddle.net/fsze55x7/1/ HTML：

<table id="highscores">
    <tr><td>Name</td><td>Score</td></tr>
</table>

JS:

var hst = document.getElementById("highscores");

var highScores = [
    {name: "Maximillian", score: 1000},
    {name: "The second guy", score: 700},
    {name: "The newbie", score: 50},
];

localStorage.setItem("highscores", JSON.stringify(highScores));

var retrievedScores = JSON.parse(localStorage.getItem("highscores"));

for (var i = 0; i < retrievedScores.length; i++) {
    hst.innerHTML += "<tr><td>" + retrievedScores[i].name + "</td><td>" + retrievedScores[i].score + "</td></tr>";
}