求助：localStorage数据无法在HTML页面正常展示问题

核心问题分析 #

• DOM元素选择错误：HTML中用于展示历史数据的元素类名为ElementThatHoldsTheHistoryData，但JavaScript中使用document.querySelector("ElementThatHoldsTheHistoryData")时缺少类选择器前缀.，导致无法获取目标元素，后续渲染操作完全无效。
• 数据保存顺序颠倒：点击按钮时先清空了输入框的值，再读取输入框内容存入localStorage，导致保存的是空字符串，即使渲染也看不到有效内容。
• 重复渲染内容：每次点击按钮都会遍历所有历史数据并添加新元素，导致页面出现大量重复内容。
• 页面初始化未加载历史数据：当前仅在点击按钮时渲染数据，页面刷新后之前存储的历史数据不会自动显示。

修复后的代码 #

HTML部分（无需修改，仅确认元素结构） #

<p> <h4 class="ElementThatHoldsTheHistoryData"></h4></p>

JavaScript修复代码 #

// 页面加载完成后自动渲染已有历史数据
document.addEventListener('DOMContentLoaded', renderRides);

// 封装渲染历史数据的复用函数
function renderRides() {
  // 修正选择器，添加类前缀
  var historyContainer = document.querySelector(".ElementThatHoldsTheHistoryData");
  // 渲染前清空容器，避免重复内容
  historyContainer.innerHTML = '';
  
  var rides = JSON.parse(localStorage.getItem("rides")) || [];
  rides.forEach(ride => {
    var item = document.createElement("p");
    item.textContent = `距离：${ride.distance}，时长：${ride.duration}`;
    historyContainer.appendChild(item);
  });
}

// 按钮点击事件逻辑修正
btn.addEventListener("click", function (event) {
  event.preventDefault();
  
  // 先读取输入框值，再清空表单
  var rideDistance = distance.value;
  var rideDuration = duration.value;
  
  // 清空表单
  distance.value = "";
  duration.value = "";

  // 清除地图标记
  markers.forEach(marker => marker.setMap(null));
  markers = [];

  // 保存数据到localStorage
  var rides = JSON.parse(localStorage.getItem("rides")) || [];
  rides.push({ distance: rideDistance, duration: rideDuration });
  localStorage.setItem("rides", JSON.stringify(rides));

  // 重新渲染历史数据
  renderRides();
});

额外优化建议 #

• 添加输入验证逻辑，避免保存空的骑行记录
• 可为历史记录项添加删除按钮，提升用户操作体验

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