如何从Local Storage中实时展示更新后的最近请求列表？

你的问题根源在于displayLastRequests函数每次执行时没有清空旧的列表内容，而是直接追加新元素，导致重复渲染；另外可能缺少页面初始化时的列表渲染调用，导致只有刷新页面（重新执行初始化逻辑）才会显示最新内容。

解决方案步骤： #

1. 清空旧内容再渲染
   在displayLastRequests开头先清空.last-requests容器，确保每次渲染都是全新的列表，避免重复项堆积。

2. 添加页面初始化渲染
   页面加载完成后调用一次displayLastRequests，确保打开页面就能看到历史记录，而新增内容后调用该函数会实时刷新列表。

修正后的代码： #

保存数据到LocalStorage的函数（无需修改调用逻辑，保留末尾的displayLastRequests()）

// Local Storage
function SaveDataToLocalStorage(data) {
  var a = [];
  // Parse the serialized data back into an array of objects
  a = JSON.parse(localStorage.getItem('last-requests')) || [];
  // Push the new data onto the beginning of the array
  a.unshift(data);
  // If more than 5 requests, remove the last one
  if (a.length > 5) {
    a.pop();
  }
  // Re-serialize and store in localStorage
  localStorage.setItem('last-requests', JSON.stringify(a));
  // 调用渲染函数更新列表
  displayLastRequests();
};

渲染最近请求的函数（修改后）

// Displays last 5 requests/searches
function displayLastRequests() {
  const lastReq = JSON.parse(localStorage.getItem('last-requests'));
  console.log(lastReq);
  
  // 清空容器内的旧内容
  $(".last-requests").empty();
  
  // 仅当存在有效数据时才渲染
  if (lastReq && lastReq.length > 0) {
    for (const req of lastReq) {
      const clone = $($("#last-request-template").html());
      clone.find(".cityname").text(req.city_name);
      clone.find(".cityweather").text(req.weather);
      clone.find(".imgs").attr('src', req.imgurl);
      clone.find(".citytemp").text(req.city_temp + " °C");
      clone.find(".citywind").text(req.city_wind + " m/s");
      clone.appendTo(".last-requests");
    }
  }
};

页面初始化调用

添加这段代码确保页面加载时就渲染历史列表：

// 页面加载完成后初始化渲染
$(document).ready(function() {
  displayLastRequests();
});

说明： #

• 清空容器后再重新渲染，保证每次显示的都是LocalStorage中最新的5条记录，不会出现重复项。
• 页面初始化时调用渲染函数，避免首次打开页面时列表为空，只有刷新后才显示的问题。
• 给循环变量req添加const声明，避免全局变量污染。

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