工作日日程调度器LocalStorage存储功能失效问题求助

核心问题1：ID选择器不匹配 #

HTML中每个时间块的ID是hour-1、hour-2（带横杠），但你在JS中读取LocalStorage时使用的选择器是#hour1、#hour2（无横杠），导致无法匹配到对应的textarea元素，刷新后自然无法填充保存的内容。

核心问题2：DOM加载时机错误 #

你的JS代码没有包裹在$(document).ready()中，可能在页面DOM尚未完全加载完成时就执行，此时选择器无法找到目标元素，导致LocalStorage的读取赋值逻辑失效。

修复步骤 #

1. 修正ID匹配问题 #

将JS中读取LocalStorage的代码，把所有hourX的选择器改为hour-X，同时对应LocalStorage的key也要和HTML的ID一致：

// 替换原来的逐个赋值代码
$("#hour-1 .description").val(localStorage.getItem("hour-1"));
$("#hour-2 .description").val(localStorage.getItem("hour-2"));
$("#hour-3 .description").val(localStorage.getItem("hour-3"));
$("#hour-4 .description").val(localStorage.getItem("hour-4"));
$("#hour-5 .description").val(localStorage.getItem("hour-5"));
$("#hour-6 .description").val(localStorage.getItem("hour-6"));
$("#hour-7 .description").val(localStorage.getItem("hour-7"));
$("#hour-8 .description").val(localStorage.getItem("hour-8"));
$("#hour-9 .description").val(localStorage.getItem("hour-9"));
$("#hour-10 .description").val(localStorage.getItem("hour-10"));

2. 包裹DOM就绪事件 #

把所有JS逻辑放在$(document).ready()中，确保DOM加载完成后再执行代码：

$(document).ready(function () {
  const clock = document.getElementById("clock");
  setInterval(() => {
      const now = moment();
      const readable = now.format("dddd, MMMM Do YYYY, h:mm:ss a");
      clock.textContent = readable;
  }, 1000);

  var saveBtn = document.querySelectorAll(".saveBtn");
  
  saveBtn.forEach(function(node) {
     
      node.addEventListener("click", function() {
         
          var description = $(this).siblings(".description").val();
          
          var time = $(this).parent().attr("id");
          
          localStorage.setItem(time, description);
  
      })
  });
  
  // 修正后的读取代码
  $("#hour-1 .description").val(localStorage.getItem("hour-1"));
  $("#hour-2 .description").val(localStorage.getItem("hour-2"));
  $("#hour-3 .description").val(localStorage.getItem("hour-3"));
  $("#hour-4 .description").val(localStorage.getItem("hour-4"));
  $("#hour-5 .description").val(localStorage.getItem("hour-5"));
  $("#hour-6 .description").val(localStorage.getItem("hour-6"));
  $("#hour-7 .description").val(localStorage.getItem("hour-7"));
  $("#hour-8 .description").val(localStorage.getItem("hour-8"));
  $("#hour-9 .description").val(localStorage.getItem("hour-9"));
  $("#hour-10 .description").val(localStorage.getItem("hour-10"));
  
  var elements = $(".time-block");
  var d = new Date();
  var h = d.getHours();

  for (i = 0; i < elements.length; i++) {
      var t = parseInt(elements[i].getAttribute("data-hour"));

      if (h < t) {
          elements[i].classList.add('future');
          elements[i].classList.remove('past');
          elements[i].classList.remove('present');
      } else if (h > t) {
          elements[i].classList.add('past');
          elements[i].classList.remove('future');
          elements[i].classList.remove('present');
      } else if (h === t) {
          elements[i].classList.add('present');
          elements[i].classList.remove('future');
          elements[i].classList.remove('past');
      } else if (h > 16 && h < 9) {
          elements[i].classList.add('future');
          elements[i].classList.remove('past');
          elements[i].classList.remove('present');
      }
  }
});

3. 可选优化：简化重复代码 #

可以用循环代替逐个赋值的重复代码，让代码更简洁易维护：

// 替换原来的10行赋值代码
$(".time-block").each(function() {
  const blockId = $(this).attr("id");
  $(this).find(".description").val(localStorage.getItem(blockId) || "");
});

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