jQuery全局变量定义问题：获取localStorage时提示变量未定义如何解决

核心错误原因 #

• 变量作用域错误：value是handleSave函数内部声明的局部变量，仅在该函数作用域内可访问，main函数无法读取该变量，直接调用localStorage.getItem(value)必然抛出变量未定义异常。
• 存储查询逻辑错误：localStorage.getItem()的入参应为存储时设置的key（也就是你代码里的hour对应的值，即.time-block的id），你误用了存储值value作为查询key，逻辑完全倒置。
• 功能逻辑缺失：当前仅实现了点击保存按钮写入localStorage的逻辑，没有实现页面初始化时读取localStorage值回填到对应文本框的逻辑，无法满足刷新页面保留内容的需求。

修复后的完整代码 #

function updateHours() {}

function handleSave(e) {
  // 替换e.target为e.currentTarget避免按钮内部有子元素时定位错误
  const saveBtn = $(e.currentTarget)
  const value = saveBtn.siblings('.description').val()
  const hour = saveBtn.closest('.time-block').attr('id')
  localStorage.setItem(hour, value)
}

function main() {
  updateHours();
  // 绑定保存事件
  $(document).on('click', '.saveBtn', handleSave)
  // 页面初始化时遍历所有时间块，回填localStorage存储的内容
  $('.time-block').each(function() {
    const hourKey = $(this).attr('id')
    const savedValue = localStorage.getItem(hourKey)
    if (savedValue) {
      $(this).find('.description').val(savedValue)
      // 调试打印可保留在此处
      console.log(`已加载${hourKey}对应的存储内容：`, savedValue)
    }
  })
}

$(document).ready(main)

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