工作日调度器：解决LocalStorage数据保存与页面重载持久化问题

问题核心原因 #

你的代码存在三个关键问题导致数据无法正常存储和持久化：

• 选择器错误：HTML中使用<textarea>作为输入控件，但JS里用container.find("input")获取值，永远拿不到有效内容
• 缺少数据回显逻辑：页面加载时仅读取了LocalStorage，但未将数据渲染到对应时间段的输入框中
• 存储逻辑缺陷：每次点击保存都往数组push新对象，会导致同一时间段重复存储多条冗余数据

修复方案及修正代码 #

修正后的JavaScript代码 #

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);

$(document).ready(function(){
    // 简化LocalStorage读取逻辑，空值时默认初始化空数组
    let scheduleContent = JSON.parse(localStorage.getItem("schedule-items")) || [];

    // 页面加载时回显存储的日程数据
    scheduleContent.forEach(item => {
        $(`#${item["input-id"]}`).val(item["input-value"]);
    });

    $("button").on("click", function() {
        // 简化父容器选择，button的直接父元素就是time-block的row
        const container = $(this).parent();
        const textarea = container.find("textarea");
        const inputValue = textarea.val().trim();
        const inputId = textarea.attr("id");

        if (inputValue) {
            // 检查是否已有该时间段数据，存在则更新，不存在则新增
            const existingIndex = scheduleContent.findIndex(item => item["input-id"] === inputId);
            if (existingIndex !== -1) {
                scheduleContent[existingIndex]["input-value"] = inputValue;
            } else {
                scheduleContent.push({
                    "input-id": inputId,
                    "input-value": inputValue
                });
            }
            localStorage.setItem("schedule-items", JSON.stringify(scheduleContent));
        }
    });

    // 时间块变色逻辑优化
    const elements = $(".time-block");
    const currentHour = new Date().getHours();
    
    for (let i = 0; i < elements.length; i++) {
        const blockHour = parseInt(elements[i].getAttribute("data-hour"));

        if (currentHour < blockHour) {
            elements[i].classList.add('future');
            elements[i].classList.remove('past', 'present');
        } else if (currentHour > blockHour) {
            elements[i].classList.add('past');
            elements[i].classList.remove('future', 'present');
        } else {
            elements[i].classList.add('present');
            elements[i].classList.remove('future', 'past');
        }
        // 移除无效判断：h>16且h<9的情况不可能发生，小时范围为0-23
    }
});

关键优化点说明 #

1. 修正输入控件选择器：将input改为textarea，确保能正确读取用户输入
2. 添加数据回显逻辑：页面加载时遍历存储的数据，填充到对应ID的输入框
3. 优化存储逻辑：避免同一时间段重复存储，已存在的数据直接更新
4. 简化父容器选择：减少不必要的DOM层级查找
5. 移除无效逻辑：删除不可能触发的时间判断条件
6. 输入值去空格：使用trim()过滤空字符串或纯空格输入

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