如何实现页面刷新时将localStorage数组回填至对应textarea

问题场景 #

开发按日工作时段渲染的日程调度Web应用，每行表格对应一个工作时段，并排展示时段标识、textarea输入框、保存按钮：

• 用户在textarea填写日程后点击保存，可将内容写入localStorage
• 控制台可确认localStorage内数据存储正确，但页面刷新后内容无法自动回填到对应输入框
• 异常点定位在localStorage.getItem的数据读取、DOM匹配逻辑段

修复后完整实现代码 #

// 绑定所有保存按钮的点击事件
for (var i = 0; i < saveBtns.length; i++){
  saveBtns[i].addEventListener("click", function(event) {
    event.preventDefault();
    var events = [];
    // 遍历9:00-17:00所有工作时段，读取对应输入框的值
    for (var i = 9; i <= 17; i++) {
        events[i] = document.getElementById(i).value;
    }
    // 序列化数组后存入localStorage
    localStorage.setItem("events", JSON.stringify(events));
    console.log(localStorage);
  })
};

// 页面加载时读取已存日程并回填
var loadEvents = function() {
  var events = JSON.parse(localStorage.getItem("events"));
  // 无已存数据时直接退出，避免报错
  if (!events) return;
  // 遍历存储的时段数据，回填到对应id的textarea
  for (var hour in events) {
    if (events[hour]) {
      document.getElementById(hour).value = events[hour];
    }
  }
}

// 执行回填逻辑
loadEvents();

核心修复点 #

• 存储阶段统一以工作时段数字作为数组索引，和对应textarea的id属性完全对齐，从根源避免DOM匹配错位
• 读取阶段增加空值校验，首次加载无历史存储数据时不会抛出JS错误阻断后续逻辑
• 回填时直接通过时段索引匹配对应DOM元素赋值，省略多余的格式转换步骤，降低逻辑出错概率

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