How to use local storage in JavaScript and output the stored elements in a table?

Question

I created a "mini-game". It is simply a reaction tester. All you do is try to click on the squares and circles as fast as you can.

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.

I have asked a lot of my friends and people at my local meetup groups, and they have recommended me to use 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.

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>

localStorage.setItem('name','Dave'); && localStorage.getItem('name'); — Jesse
– Jesse, Commented Oct 1, 2015 at 2:33
localStorage stores data on user's browser so the data stored as localStorage on one computer cannot be viewed from other computer — Saumil
– Saumil, Commented Oct 1, 2015 at 3:25

Maximillian Laumeister · Accepted Answer · 2015-10-01 03:07:04Z

2

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.

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

answered Oct 1, 2015 at 3:07

Maximillian Laumeister

20.5k10 gold badges62 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nastypluto Over a year ago

Thank you so much! That helped a lot. I now have it set up in a different domain but it seems to be working. Cheers!

Maximillian Laumeister Over a year ago

@developertenzin Awesome, glad it helped! If you found this answer useful, please consider marking it as accepted by clicking the gray checkmark to the left of it. Thanks!

nastypluto Over a year ago

Sure thing! I didn't know you could do that. Thanks for that as well.

Collectives™ on Stack Overflow

How to use local storage in JavaScript and output the stored elements in a table?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related