如何在工作日计划应用中实现本地存储与数据持久化

// ... 其他代码 ...

$(document).ready(function() {
    var scheduleContent = []; // 用于存储日程数据的内存数组

    // 函数：从localStorage加载日程并渲染到UI
    function loadSchedule() {
        var getLocalStorageData = JSON.parse(localStorage.getItem("schedule-items"));

        if (getLocalStorageData !== null) {
            scheduleContent = getLocalStorageData; // 更新内存数组
            // 遍历加载的数据，并填充到对应的textarea元素中
            scheduleContent.forEach(function(item) {
                // 确保通过正确的ID找到textarea并设置其值
                $("#" + item["input-id"]).val(item["input-value"]);
            });
        }
    }

    // 页面加载时调用，以显示之前保存的日程
    loadSchedule();

    // ... 其他代码 ...
});

// ... 其他代码 ...

$(document).ready(function() {
    // ... loadSchedule() 和 loadSchedule() 调用 ...

    // 保存按钮点击事件处理
    $("button").on("click", function() {
        var container = $(this).parent().parent();
        // 获取textarea的值，并去除首尾空格
        var inputValue = container.find("textarea").val().trim();
        // 获取textarea的ID
        var inputId = container.find("textarea").attr("id");

        if (inputValue !== "") {
            // 查找是否已存在相同input-id的日程
            var existingIndex = scheduleContent.findIndex(item => item["input-id"] === inputId);

            if (existingIndex > -1) {
                // 如果存在，更新现有日程的值
                scheduleContent[existingIndex]["input-value"] = inputValue;
            } else {
                // 如果不存在，添加新日程
                var textObj = {
                    "input-id": inputId,
                    "input-value": inputValue
                };
                scheduleContent.push(textObj);
            }
        } else {
            // 如果输入值为空，则从日程列表中移除该项（如果存在）
            scheduleContent = scheduleContent.filter(item => item["input-id"] !== inputId);
        }

        // 将更新后的日程数组保存到localStorage
        localStorage.setItem("schedule-items", JSON.stringify(scheduleContent));

        // 可选：提供用户反馈
        alert("日程已保存！");
    });

    // ... 时间块颜色逻辑 ...
});

// 实时时钟显示
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);

// DOM加载完成后执行
$(document).ready(function() {
    var scheduleContent = []; // 用于存储日程数据的内存数组

    // 函数：从localStorage加载日程并渲染到UI
    function loadSchedule() {
        // 尝试从localStorage获取数据并解析
        var getLocalStorageData = JSON.parse(localStorage.getItem("schedule-items"));

        if (getLocalStorageData !== null) {
            scheduleContent = getLocalStorageData; // 更新内存数组
            // 遍历加载的数据，并填充到对应的textarea元素中
            scheduleContent.forEach(function(item) {
                // 使用jQuery选择器通过ID找到textarea并设置其值
                $("#" + item["input-id"]).val(item["input-value"]);
            });
        }
    }

    // 页面加载时调用，以显示之前保存的日程
    loadSchedule();

    // 保存按钮点击事件处理
    $("button").on("click", function() {
        var container = $(this).parent().parent();
        // 获取textarea的值，并去除首尾空格，确保数据干净
        var inputValue = container.find("textarea").val().trim();
        // 获取textarea的ID，用于唯一标识日程条目
        var inputId = container.find("textarea").attr("id");

        if (inputValue !== "") {
            // 查找是否已存在相同input-id的日程
            var existingIndex = scheduleContent.findIndex(item => item["input-id"] === inputId);

            if (existingIndex > -1) {
                // 如果存在，更新现有日程的值
                scheduleContent[existingIndex]["input-value"] = inputValue;
            } else {
                // 如果不存在，添加新日程对象
                var textObj = {
                    "input-id": inputId,
                    "input-value": inputValue
                };
                scheduleContent.push(textObj);
            }
        } else {
            // 如果输入值为空，则从日程列表中移除该项（如果存在）
            scheduleContent = scheduleContent.filter(item => item["input-id"] !== inputId);
        }

        // 将更新后的日程数组转换为JSON字符串并保存到localStorage
        localStorage.setItem("schedule-items", JSON.stringify(scheduleContent));

        // 可选：提供用户保存成功的反馈
        alert("日程已保存！");
    });

    // 时间块颜色标记逻辑
    var elements = $(".time-block");
    var d = new Date();
    var h = d.getHours(); // 获取当前小时 (0-23)

    for (let 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', 'present');
        } else if (h > t) {
            // 当前小时大于时间块小时，标记为过去 (灰色)
            elements[i].classList.add('past');
            elements[i].classList.remove('future', 'present');
        } else if (h === t) {
            // 当前小时等于时间块小时，标记为现在 (红色)
            elements[i].classList.add('present');
            elements[i].classList.remove('future', 'past');
        }
        // 原始代码中的 'else if (h > 16 && h < 9)' 逻辑上不可能，已移除。
        // 如果需要处理跨天或特定时间段的特殊颜色，应重新设计逻辑。
    }
});