Javascript使用localStorage存储消息时for循环渲染重复数据问题

问题根因 #

• 每次新消息触发回调时，没有清空表格原有内容，直接遍历全量历史数据追加，导致旧数据重复渲染
• 存储数据时额外包了一层数组[data]，导致读取数据时需要多取一层[0]，属于冗余操作

修复方案 #

完整修正代码 #

var hst = document.getElementById("highscores");

// 页面初始化时加载历史数据渲染，保证刷新后数据不丢失
function initRender() {
  // 先清空表格原有内容
  hst.innerHTML = '';
  var array = JSON.parse(localStorage.getItem('highscores') || '[]');
  for (var i = 0; i < array.length; i++) {
    hst.innerHTML += `<tr><td>${array[i].Hour}:${array[i].min}:${array[i].Second}</td><td>${array[i].lastTid}</td></tr>`;
  }
}
// 页面加载完成执行初始化
window.onload = initRender;

function onMessageArrived(message) {
  var data = JSON.parse(message.payloadString);
  var array = JSON.parse(localStorage.getItem('highscores') || '[]');
  // 直接存数据对象，不需要额外包数组
  array.push(data);
  localStorage.setItem('highscores', JSON.stringify(array));
  
  // 方案1：全量重渲染（逻辑简单不易出错，数据量不大的场景推荐）
  initRender();

  // 方案2：仅追加新数据（性能更好，适合数据量较大的场景，注释掉方案1再打开下面一行即可）
  // hst.innerHTML += `<tr><td>${data.Hour}:${data.min}:${data.Second}</td><td>${data.lastTid}</td></tr>`;
}

改动说明 #

1. 新增初始化渲染函数initRender，页面加载时自动执行，读取本地存储的所有历史数据渲染到表格，保证页面刷新后数据不丢失
2. 存储数据时直接存入消息对象，去掉冗余的数组包裹，简化后续读取逻辑
3. 新消息到达时可二选一使用渲染逻辑，都不会出现重复渲染问题：
   • 全量重渲染：每次都先清空表格再渲染所有数据，逻辑简单，适合数据量不大的场景
   • 仅追加新数据：不需要遍历历史数据，直接把新到的消息拼接进表格，性能更好，适合数据量较大的场景

内容的提问来源于stack exchange，提问作者Sikandar Malik