如何将localStorage存储的对象数据正确渲染展示到网页上

问题背景 #

开发多城市天气查询网站时，用户搜索记录以对象格式存入localStorage，需要在页面渲染最近5条搜索历史，初始编写的代码无法实现预期效果。

初始HTML结构 #

<div class="jumbotron bg-white">
    <div class="container">
        <h1>Latest requests</h1>
        <h5 id="get-weather">We remember your five last requests for you :)</h5>
        <div class="last-requests">
            <img src="" class="imgs">
            <p class="cityname" class="mr-3"></p>
            <p class="cityweather"></p>
            <p class="citytemp"></p>
            <p class="citywind"></p>
        </div>
    </div>
</div>

初始JS渲染逻辑 #

// Displays last 5 requests/searches
function displayLastRequests() {
  const lastReq = JSON.parse(localStorage.getItem('last-requests'))
  console.log(lastReq)
  if (displayLastRequests > 0) {
    // for loop request
    for (req in lastReq) {
      $(".imgs").attr('src', req.imgurl);
      $(".cityname").text(req.city_name);
      $(".cityweather").text(req.city_weather);
      $(".citytemp").text(req.city_temp + " °C");
      $(".citywind").text(req.city_wind + " m/s");
    }
  }
};
displayLastRequests()

代码存在的核心问题 #

• HTML语法错误：cityname对应的<p>标签重复声明class属性，第二个class="mr-3"不会被浏览器解析，对应样式会失效
• 条件判断完全无效：if (displayLastRequests > 0)判断目标是函数本身，函数为引用类型，和数值0比较结果永远为false，判断块内代码根本不会执行
• 循环取值错误：for...in遍历结构时拿到的req是索引/键名，不是存储的天气记录对象本身，直接访问req.imgurl等属性只会得到undefined
• DOM操作逻辑错误：全局选择.imgs、.cityname等元素，即使循环正常执行，也会反复覆盖同一组元素的内容，最终最多只显示1条记录
• 边界情况缺失：未处理localStorage无历史记录、lastReq为null的场景，直接遍历会抛出JS错误中断执行

修复后代码 #

修正后HTML #

<div class="jumbotron bg-white">
    <div class="container">
        <h1>Latest requests</h1>
        <h5 id="get-weather">We remember your five last requests for you :)</h5>
        <!-- 历史记录列表容器 -->
        <div class="last-requests-wrap"></div>
    </div>
</div>

修正后JS逻辑 #

function displayLastRequests() {
  // 读取本地存储，空值时默认赋值为空数组避免报错
  const lastReq = JSON.parse(localStorage.getItem('last-requests')) || [];
  const recordWrap = $(".last-requests-wrap");
  // 清空容器旧内容
  recordWrap.empty();

  // 截取最近5条记录遍历渲染
  lastReq.slice(-5).forEach(record => {
    // 生成单条记录的独立DOM节点
    const recordItem = $(`
      <div class="last-requests">
          <img src="" class="imgs">
          <p class="cityname mr-3"></p>
          <p class="cityweather"></p>
          <p class="citytemp"></p>
          <p class="citywind"></p>
      </div>
    `);
    // 在当前单条记录节点内查找元素填充数据，避免全局选择覆盖其他内容
    recordItem.find(".imgs").attr('src', record.imgurl);
    recordItem.find(".cityname").text(record.city_name);
    recordItem.find(".cityweather").text(record.city_weather);
    recordItem.find(".citytemp").text(`${record.city_temp} °C`);
    recordItem.find(".citywind").text(`${record.city_wind} m/s`);
    // 将填充完成的记录追加到容器中
    recordWrap.append(recordItem);
  })
};
// 页面加载时执行渲染
displayLastRequests()

存储搜索记录时建议使用数组结构按时间顺序存储，新搜索结果追加到数组末尾，数组长度超过5时删除最早的记录，保证渲染时能正确取到最近5条数据。

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