日程规划应用localStorage保存为undefined、刷新无法读取数据求助

开发者阿泽

2026-10-10

问题排查&修复方案

你代码里一共3处核心错误导致存储和读取失效：

第一处：获取输入框值的DOM遍历路径错误
.saveBtn的父级是<td class="btnContainer">，和装输入框的<td>是同级，.hourinput在另一个td的内部，用siblings('.hourinput')根本找不到对应元素，所以hourinput取值是undefined。
第二处：获取小时id的路径错误
你把id加在<tr>节点上，当前代码取的是.saveBtn父级（也就是btnContainer的td）的id，这个td没有id属性，所以hour取值也是undefined，就导致你存的键值对都是undefined:undefined。
第三处：读取本地存储的代码执行时机错误
你把读取赋值的代码直接写在全局，页面加载时DOM还没渲染完就执行，找不到对应的.hourinput元素，所以刷新后数据没法回填。

修正后的JS代码

// Moment.js 自动更新页面时间
var update = function () {
    date = moment(new Date());
    currentDay.html(date.format('dddd, MMMM Do YYYY, HH:mm:ss a'));
};

$(document).ready(function(){
    currentDay = $('#currentDay');
    update();
    setInterval(update, 1000);

    // 保存按钮点击事件放在ready里，避免DOM没加载完绑定失效
    $('.saveBtn').on('click', function () {
        // 先获取当前按钮对应的tr行节点
        var $row = $(this).closest('.row');
        // 从行里找输入框的值
        var hourinput = $row.find('.hourinput').val();
        // 取行的id作为存储的key
        var hour = $row.attr('id');
        // 存到localStorage
        localStorage.setItem(hour, hourinput);
    });

    // 读取数据回填的逻辑放到ready里，保证DOM已经加载完成
    for(let i =9;i<=17;i++){
        $(`#${i} .hourinput`).val(localStorage.getItem(i));
    }
});