localStorage存值正常但向HTML追加数据输出异常如何解决

问题原因&修复方案 #

你的代码主要存在4处可修正的点：

• 遍历逻辑冗余：iDataHandler本身是数组，不需要用Object.keys处理，直接按数组下标遍历即可
• 输出格式错误：你直接将存储数据的对象拼接进HTML，对象默认转为字符串会显示[object Object]，就是你遇到的异常输出，需要手动取出对象内的字段拼接
• 重复渲染问题：每次点击保存都会遍历所有历史数据追加，会导致旧数据重复展示，追加前先清空容器即可解决
• 属性语法错误：data-postid的属性定义少了等于号，属于语法疏漏

修正后的完整JS代码

$("document").ready(function(){
  var iDataHandler = [];
  
  $(".save").on("click", function() {
    if(typeof(Storage) !== "undefined") {
      if(localStorage.getItem('iDataHandler') && localStorage.getItem('iDataHandler').length > 0) {
        iDataHandler = JSON.parse(localStorage.getItem('iDataHandler'));
      }
      const DataHandler = {
        'title': $("#txtbox-1").val(),
        'para': $("#txtbox-2").val(),
        'para1': $("#txtbox-3").val(),
      };
      
      iDataHandler.push(DataHandler);
      localStorage.setItem('iDataHandler', JSON.stringify(iDataHandler));
    }
    // 追加前先清空容器避免重复
    $(".sNote").empty();
    // 直接遍历数组
    for (var i = 0; i < iDataHandler.length; i++) {
      const item = iDataHandler[i];
      // 手动拼接对象内的字段，修正data-postid语法
      $(".sNote").append(
        `<div class="list-item" data-postid="${i}">
          标题：${item.title}，内容1：${item.para}，内容2：${item.para1}
        </div>
        <div class="close"><i class="fas fa-times"></i></div>`
      );
    }      
  });
});

直接替换原有JS代码即可正常实现存储+渲染需求。

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