JavaScript日程调度器：实现数据本地存储与页面持久化

<div id="hour-1" data-hour="8" class="row time-block">
  <div class="col-1 hour">8AM</div>
  <textarea id="8AM" class="col-md-10 description"></textarea>
  <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
</div>
<!-- 更多时间块... -->

.past {
  background-color: #d3d3d3; /* 灰色 */
}
.present {
  background-color: #ff6961; /* 红色 */
}
.future {
  background-color: #77dd77; /* 绿色 */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

// 示例：优化的数据结构
// {
//   "8AM": "团队晨会",
//   "9AM": "代码审查",
//   "10AM": "项目规划"
// }

// script.js
$(document).ready(function() {
    // ... 其他初始化代码 (时钟显示) ...

    // 1. 初始化日程数据：从 localStorage 读取，如果不存在则为空对象
    let scheduleData = JSON.parse(localStorage.getItem("workday-scheduler-events")) || {};

    // 2. 加载并显示数据到文本区域
    function loadAndDisplaySchedule() {
        $(".description").each(function() {
            const textareaId = $(this).attr("id"); // 获取 textarea 的 ID (例如 "8AM")
            if (scheduleData[textareaId]) { // 如果该时间段有保存的事件
                $(this).val(scheduleData[textareaId]); // 填充到 textarea
            }
        });
    }

    // 在页面加载完成后立即执行
    loadAndDisplaySchedule();

    // ... 其他代码 (保存事件、更新时间块颜色) ...
});

// script.js
$(document).ready(function() {
    // ... 时钟显示和数据加载代码 ...

    // 封装保存数据到 localStorage 的函数
    function saveScheduleData() {
        localStorage.setItem("workday-scheduler-events", JSON.stringify(scheduleData));
    }

    // 3. 监听保存按钮的点击事件
    $(".saveBtn").on("click", function() {
        const textarea = $(this).siblings(".description"); // 获取与按钮同级的 textarea
        const textareaId = textarea.attr("id");
        const inputValue = textarea.val().trim(); // 获取输入值并去除首尾空格

        if (inputValue !== "") {
            scheduleData[textareaId] = inputValue; // 更新或添加事件
        } else {
            delete scheduleData[textareaId]; // 如果输入为空，则删除该事件
        }
        saveScheduleData(); // 保存更新后的数据到 localStorage

        // 可选：提供用户保存反馈
        const saveIcon = $(this).find("i");
        saveIcon.removeClass("fas fa-save").addClass("fas fa-check").css("color", "green");
        setTimeout(() => {
            saveIcon.removeClass("fas fa-check").addClass("fas fa-save").css("color", "white");
        }, 1000);
    });

    // ... 其他代码 (更新时间块颜色) ...
});

// script.js
$(document).ready(function() {
    // 实时时钟显示
    const clock = $("#clock");
    setInterval(() => {
        const now = moment();
        const readable = now.format("dddd, MMMM Do YYYY, h:mm:ss a");
        clock.text(readable);
        // 每秒更新时钟，但时间块颜色不需要每秒更新
        // 如果需要每秒更新时间块颜色，可以将 updateTimeBlockColors() 放在这里
    }, 1000);

    // 1. 初始化日程数据：从 localStorage 读取，如果不存在则为空对象
    let scheduleData = JSON.parse(localStorage.getItem("workday-scheduler-events")) || {};

    // 封装保存数据到 localStorage 的函数
    function saveScheduleData() {
        localStorage.setItem("workday-scheduler-events", JSON.stringify(scheduleData));
    }

    // 2. 加载并显示数据到文本区域
    function loadAndDisplaySchedule() {
        $(".description").each(function() {
            const textareaId = $(this).attr("id");
            if (scheduleData[textareaId]) {
                $(this).val(scheduleData[textareaId]);
            }
        });
    }

    // 3. 监听保存按钮的点击事件
    $(".saveBtn").on("click", function() {
        const textarea = $(this).siblings(".description");
        const textareaId = textarea.attr("id");
        const inputValue = textarea.val().trim();

        if (inputValue !== "") {
            scheduleData[textareaId] = inputValue;
        } else {
            delete scheduleData[textareaId]; // 如果输入为空，则删除该事件
        }
        saveScheduleData();

        // 提供用户保存反馈
        const saveIcon = $(this).find("i");
        saveIcon.removeClass("fas fa-save").addClass("fas fa-check").css("color", "green");
        setTimeout(() => {
            saveIcon.removeClass("fas fa-check").addClass("fas fa-save").css("color", "white");
        }, 1000);
    });

    // 4. 更新时间块的颜色 (过去、现在、未来)
    function updateTimeBlockColors() {
        const currentHour = moment().hour(); // 获取当前小时 (0-23)

        $(".time-block").each(function() {
            const blockHour = parseInt($(this).attr("data-hour")); // 获取时间块的 data-hour (8, 9, ..., 17)
            $(this).removeClass("past present future"); // 清除现有样式

            if (blockHour < currentHour) {
                $(this).addClass("past");
            } else if (blockHour === currentHour) {
                $(this).addClass("present");
            } else {
                $(this).addClass("future");
            }
        });
    }

    // 页面加载时执行
    loadAndDisplaySchedule();
    updateTimeBlockColors();

    // 每隔一段时间（例如每分钟）更新时间块颜色，确保实时性
    setInterval(updateTimeBlockColors, 60 * 1000);
});