利用 Local Storage 实现网页数据持久化：以工作日日程表为例

var scheduleContent = [];
var getLocalStorageData = JSON.parse(localStorage.getItem("schedule-items"));

if (getLocalStorageData !== null) {
    scheduleContent = getLocalStorageData;
}

$("button").on("click", function() {
    var container = $(this).parent().parent();
    var inputValue = container.find("textarea").val(); // 注意这里是textarea
    var inputId = container.find("textarea").attr("id"); // 注意这里是textarea
    var textObj = {
        "input-id": inputId,
        "input-value": inputValue
    };

    if (textObj["input-value"] !== "") {
        scheduleContent.push(textObj);
        localStorage.setItem("schedule-items", JSON.stringify(scheduleContent));
    }
});

$(document).ready(function() {
    // 获取并显示当前日期和时间（原代码已包含，此处省略）
    // ...

    // 声明 scheduleContent 为一个对象，用于存储日程数据
    var scheduleContent = {};
    // 从 Local Storage 中获取数据
    var storedSchedule = JSON.parse(localStorage.getItem("schedule-items"));

    // 如果 Local Storage 中有数据，则使用它；否则，scheduleContent 保持为空对象
    if (storedSchedule !== null) {
        scheduleContent = storedSchedule;
    }

    // ... (其他初始化逻辑)
});

$(document).ready(function() {
    // ... (时钟和日期显示逻辑)

    var scheduleContent = {};
    var storedSchedule = JSON.parse(localStorage.getItem("schedule-items"));

    if (storedSchedule !== null) {
        scheduleContent = storedSchedule;
    }

    // 遍历 scheduleContent 对象，将数据渲染到对应的 textarea
    $.each(scheduleContent, function(id, value) {
        $("#" + id).val(value);
    });

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

$(document).ready(function() {
    // ... (数据加载和渲染逻辑)

    $("button").on("click", function() {
        var container = $(this).parent().parent();
        var inputValue = container.find("textarea").val().trim(); // 获取输入值并去除首尾空格
        var inputId = container.find("textarea").attr("id");

        // 如果输入值不为空，则更新 scheduleContent 对象
        if (inputValue !== "") {
            scheduleContent[inputId] = inputValue;
        } else {
            // 如果输入值为空，则从 scheduleContent 中移除该条目（可选，根据需求）
            delete scheduleContent[inputId];
        }

        // 将更新后的 scheduleContent 对象保存到 Local Storage
        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);

$(document).ready(function() {
    // 声明 scheduleContent 为一个对象，用于存储日程数据
    var scheduleContent = {};
    // 从 Local Storage 中获取数据
    var storedSchedule = JSON.parse(localStorage.getItem("schedule-items"));

    // 如果 Local Storage 中有数据，则使用它；否则，scheduleContent 保持为空对象
    if (storedSchedule !== null) {
        scheduleContent = storedSchedule;
    }

    // 遍历 scheduleContent 对象，将数据渲染到对应的 textarea
    $.each(scheduleContent, function(id, value) {
        $("#" + id).val(value);
    });

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

        // 如果输入值不为空，则更新 scheduleContent 对象
        if (inputValue !== "") {
            scheduleContent[inputId] = inputValue;
        } else {
            // 如果输入值为空，则从 scheduleContent 中移除该条目
            delete scheduleContent[inputId];
        }

        // 将更新后的 scheduleContent 对象保存到 Local Storage
        localStorage.setItem("schedule-items", JSON.stringify(scheduleContent));

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

    // 时间块颜色更新逻辑
    var elements = $(".time-block");
    var d = new Date();
    var h = d.getHours();

    for (var 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');
        }
        // 注意：原代码中的 'h > 16 && h < 9' 条件逻辑上永远不会成立，
        // 因为小时数 h 不可能同时大于16且小于9。
        // 此处保留原意，但通常会处理成一天结束后的情况。
        // 例如，如果 h > 17 (即5PM之后)，所有块都变为 past。
    }
});