Javascript localStorage for 循环的问题

Question

我正在使用 localStorage 来存储传入消息：{"lastTid":22,"Hour":10,"min":31,"Second":34} 每个新传入对象的时间都在增加，例如下一个对象：{"lastTid":22,"Hour":10,"min":31,"Second":35}.

新消息已正确存储在 localStorage 中，在此处看到：

我的 Javascript 代码正确地实现了 localStorage.getItem 和 .setItem 以检索并获取我的传入数据消息，该消息将使用 .innerHTML 呈现给 var hst， hst = document.getElementById("highscores")。 下面的所有代码

ElementId“highscores”被分配到我的 html 中的 <table> 标签，并在此处显示为 seen：

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

我的问题是，由于我的 For 循环，当新消息到达时，我的循环遍历并呈现前一条消息和新消息，而旧消息仍在 table(请看上面的 table 图片 )。它在同一 table 中显示对象 0、对象 0 和 1，然后是对象 0、1 和 2。而不是0，然后1之后，然后2 ... n.

我希望以正确的顺序显示这些值，并且即使在重新加载页面后也能保留这些值。 想要的结果：

Answer 1

不要直接追加 hst.innerHTML +=...

尝试这样的事情

let html = ''
for (var i = 0; i < array.length; i++) {
        html += "<tr><td>" + array[i][0].Hour + ":"+ array[i][0].min + ":" + array[i][0].Second + "</td><td>" + array[i][0].lastTid + "</td></tr>";
}
hst.innerHTML = html

Answer 2

我认为问题在于您总是在 hst.innerHTML 每条传入消息处附加数组内容，因此之前的循环内容仍然存在。也不建议为了性能在循环内操作 DOM。

let res = '';
for (var i = 0, l = array.length; i < l; i++) {
  res += '<tr><td>' + array[i][0].Hour + ':' + array[i][0].min + ':' + array[i][0].Second + '</td><td>' + array[i][0].lastTid + '</td></tr>';
}
hst.innerHTML = res; // You overwrite the content instead of appending each time.

Javascript localStorage for 循环的问题

Problem with Javascript localStorage for-loop

javascript

for-loop

local-storage