Estoy usando localStorage para almacenar el mensaje entrante: {"lastTid":22,"Hour":10,"min":31,"Second":34} donde el tiempo aumenta en cada nuevo objeto entrante, por ejemplo, siguiente objeto: {"lastTid":22,"Hour":10,"min":31,"Second":35} .

Los nuevos mensajes se almacenan en localStorage correctamente como se ve aquí:

Mi código Javascript implementa localStorage.getItem y .setItem correctamente para recuperar y obtener mi mensaje de datos entrante, que se representará con .innerHTML en var hst , que hst = document.getElementById("highscores") . todo el código a continuación

Las "puntuaciones más altas" de ElementId se asignan a la etiqueta <table> en mi html y aparecen como se ve aquí:

#fragmento de código js#

 var hst = document.getElementById("highscores"); function onMessageArrived(message) { var data = JSON.parse(message.payloadString); var highScores = [data]; var array = JSON.parse(localStorage.getItem('highscores') || '[]'); array.push(highScores); localStorage.setItem('highscores', JSON.stringify(array)); for (var i = 0; i < array.length; i++) { hst.innerHTML += "<tr><td>" + array[i][0].Hour + ":"+ array[i][0].min + ":" + array[i][0].Second + "</td><td>" + array[i][0].lastTid + "</td></tr>"; } };

Mi problema es que, debido a mi ciclo For, cuando llega un mensaje nuevo, mi ciclo pasa y muestra el mensaje anterior y el mensaje nuevo, mientras que el mensaje anterior todavía está en la tabla ( consulte la imagen de la tabla de arriba ). Muestra el objeto 0, el objeto 0 y 1, luego el objeto 0, 1 y 2, todo en la misma tabla. En lugar de 0, luego 1 después, luego 2 ... n.

Deseo mostrar los valores en el orden correcto y también mantener esos valores incluso después de recargar la página. Resultado deseado: