我正在使用 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" 被分配給<table>我的標簽，html如下所示：
#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 回圈，當新訊息到達時，我的回圈會遍歷并呈現上一條訊息和新訊息，而舊訊息仍在表格中（請參閱上面的表格圖片）。它在同一個表中顯示物件 0、物件 0 和 1，然后是物件 0、1 和 2。而不是 0，然后是 1 之后，然后是 2 ... n。
我希望以正確的順序顯示這些值，并且即使在頁面重新加載后也保留這些值。想要的結果：
uj5u.com熱心網友回復：
不要直接追加 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
uj5u.com熱心網友回復：
我認為問題在于您總是在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.
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/322694.html
標籤：javascript 循环 本地存储
下一篇：for回圈完成后設定回值