如何在Javascript中使用本地存储并输出表中存储的元素？ [英] How to use local storage in Javascript and output the stored elements in a table?
问题描述
这是我关于Stackoverflow的第一个问题。
This is my first question on Stackoverflow.
所以我创建了这个迷你游戏使用 html ， css 和 javascript 。它只是一个反应测试者。你所要做的就是尽可能快地点击方块和圆圈。您可以访问 http://output.jsbin.com/xejihojifa
So I created this "mini-game" with html, css and javascript. It is simply a reaction tester. All you do is try to click on the squares and circles as fast as you can. You can play it by visiting http://output.jsbin.com/xejihojifa
我现在要做的就是有一个播放按钮。当用户点击播放按钮时，它会提示用户或输入用户的名字并存储它。一旦用户开始播放，我想存储用户得到的最高分（在这种情况下是最少的时间），并将其显示在一个表中，以便像领导板一样公开显示。
What I want to do now is to have a play button. When a user clicks on the play button, it would give prompt the user or input the user's name and store it. Once the user starts playing, I want to store the highest score the (least time in this case) user gets, and display it in a table so it is publicly visible like a leader board.
这是我第一个使用全部三个 html ， css 和 javascript 。我在当地的聚会小组中询问了很多朋友和人，他们建议我使用 html5 本地存储或 json 。我目前没有使用 json 的经验。那么我将如何创造这样的东西呢？
This is my first app using all three html, css, and javascript. And I have asked a lot of my friends and people at my local meetup groups, and they have recommended me to use html5 local storage or json. I have no experience with json at the moment. So how would I go about creating such a thing.
我会喜欢任何批评或建议或意见，或者只是改进我的代码。先感谢您。
And I would love any criticisms or suggestions or comments or just anything to improve my code below. Thank you in advance.
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
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;
}
</style>
</head>
<body>
<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>
<script type="text/javascript">
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();
</script>
</body>
</html>
推荐答案
这是一个如何使用HTML的快速现场演示本地存储以保存高分列表，然后检索它并将数据放入表结构中。演示脚本获取高分列表，将其存储到本地存储，从本地存储中检索，然后将其显示在表中。
Here's a quick live demo of how you can use HTML local storage to save a list of high scores, then retrieve it and put the data into a table structure. The demonstration script takes a list of high scores, stores it to local storage, retrieves it from local storage, then displays it in a table.
自 localStorage ，这是一个演示代码的JSFiddle： https://jsfiddle.net/fsze55x7/1/
Since localStorage isn't supported by Stack Snippet, here is a JSFiddle that demonstrates the code: 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>";
}
这篇关于如何在Javascript中使用本地存储并输出表中存储的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
