使用for循环展示sessionStorage数据：图标仅单个显示的问题求助

嘿，我来帮你搞定这个问题！这种循环渲染只出最后一个元素的情况太常见了，大概率是数据处理不当或者DOM渲染时不小心覆盖了内容导致的，咱们一步步来排查修复：

第一步：先把sessionStorage里的字符串数据拆成结构化的项 #

你现在输出的是一串拼接的字符串：21.62 /weather/icons/01d.png 18.16 /weather/icons/02d.png ...，显然是把多个天气条目（气温+图标）拼在了一起。首先得把它们拆成一个个独立的天气对象，方便后续循环渲染：

// 从sessionStorage取出数据
const rawWeatherData = sessionStorage.getItem('yourWeatherKey'); // 替换成你实际存储用的key
// 按空格拆分数组
const dataSegments = rawWeatherData.split(' ');
// 每两个元素组成一个天气项（气温+图标）
const weatherItems = [];
for (let i = 0; i < dataSegments.length; i += 2) {
  // 避免数组越界，确保当前和下一个元素都存在
  if (dataSegments[i] && dataSegments[i+1]) {
    weatherItems.push({
      temperature: dataSegments[i],
      iconPath: dataSegments[i+1]
    });
  }
}

第二步：修复DOM渲染逻辑（核心！） #

你只看到单个图标，十有八九是循环时每次都覆盖了同一个容器的内容，而不是追加新元素。比如错误的写法是这样的：

// ❌ 错误示例：每次循环都替换innerHTML，最后只剩最后一项
const listEl = document.getElementById('weather-list');
for (const item of weatherItems) {
  listEl.innerHTML = `<li>${item.temperature} <img src="${item.iconPath}" alt="天气图标"></li>`;
}

改成下面两种正确的写法之一：

写法一：用innerHTML追加（简单，数据可信时可用） #

const listEl = document.getElementById('weather-list');
listEl.innerHTML = ''; // 先清空容器旧内容
for (const item of weatherItems) {
  // 用+=追加，而不是=替换
  listEl.innerHTML += `<li>${item.temperature} <img src="${item.iconPath}" alt="天气图标"></li>`;
}

写法二：创建DOM元素并追加（更安全，推荐） #

如果担心XSS风险（比如数据不可信），或者想更灵活控制元素，就用原生DOM方法创建：

const listEl = document.getElementById('weather-list');
listEl.innerHTML = ''; // 清空容器
for (const item of weatherItems) {
  // 创建列表项
  const listItem = document.createElement('li');
  // 创建气温文本节点
  const tempText = document.createTextNode(`${item.temperature} `);
  // 创建图标元素
  const iconImg = document.createElement('img');
  iconImg.src = item.iconPath;
  iconImg.alt = `${item.temperature}℃对应的天气图标`;
  // 把文本和图标加到列表项里
  listItem.appendChild(tempText);
  listItem.appendChild(iconImg);
  // 把列表项加到容器里
  listEl.appendChild(listItem);
}

第三步：检查图标路径是否正确 #

如果还是有图标不显示，打开浏览器控制台的「Network」标签，看看图片的请求状态是不是404——有可能是相对路径不对（比如你的页面在子目录，但图标路径是根目录开头的），调整路径即可。

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