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

本教程详细讲解如何利用javascript和web storage api（`localstorage`）为日程调度器实现事件数据的本地存储与页面重载后的持久化。通过优化数据结构、实现加载与保存逻辑，并结合时间块的动态样式更新，确保用户输入的信息能够可靠地保存并在下次访问时自动恢复，提升用户体验。

构建一个实用的日程调度器，除了展示当前时间、根据时间段动态改变样式外，最核心的功能之一就是数据的持久化。用户输入的日程事件应该在页面刷新或关闭浏览器后依然存在，以便下次访问时能够继续查看和编辑。本教程将深入探讨如何利用浏览器提供的Web Storage API，特别是localStorage，来实现这一关键功能，并提供一个优化后的完整代码示例。

Web Storage API 提供了一种机制，允许网站在用户浏览器中存储键值对数据。它包括 localStorage 和 sessionStorage 两种对象。

对于日程调度器这种需要长期保存用户数据的功能，localStorage 是理想的选择。

localStorage 提供了以下几个核心方法：

立即学习“Java免费学习笔记（深入）”；

重要提示： localStorage 只能存储字符串。如果需要存储 JavaScript 对象或数组，必须先使用 JSON.stringify() 将其转换为 JSON 字符串，读取时再使用 JSON.parse() 将其转换回 JavaScript 对象。

为了更好地理解和实现数据持久化，我们首先回顾日程调度器的基本HTML和CSS结构，以及所需的JavaScript库。

日程调度器通常由一系列时间块组成，每个时间块包含：

每个时间块和 textarea 都应有唯一的ID或 data- 属性，以便于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><!-- 更多时间块... -->

这里，textarea 的 id (如 "8AM") 将作为我们存储事件的键。

CSS主要负责布局和根据时间动态改变时间块的背景颜色，以区分“过去”、“现在”和“未来”事件。例如：

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

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

本项目依赖 jQuery 简化DOM操作，以及 Moment.js 处理日期和时间。

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

实现数据持久化的关键在于：在页面加载时从 localStorage 读取数据并显示，在用户保存时将数据写入 localStorage。

原始代码尝试将事件存储为一个数组，每次保存都 push 一个新对象。这种方式会导致数据冗余和管理复杂。更优化的方法是使用一个JavaScript对象作为存储结构，其中键是 textarea 的ID（例如 "8AM", "9AM"），值是用户输入的事件描述。

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

这种键值对结构使得通过 textarea ID 快速查找、更新和删除事件变得非常高效。

在页面初始化时，我们需要执行以下步骤：

// 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 的完整优化代码：

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

除了数据持久化，日程调度器还需要根据当前时间动态调整时间块的样式。这部分逻辑在 updateTimeBlockColors 函数中实现：

通过本教程，我们学习了如何利用 Web Storage API (localStorage) 为日程调度器实现数据的本地存储和页面重载后的持久化。关键步骤包括：选择合适的存储机制、优化数据结构（使用键值对对象）、实现页面加载时的数据读取和显示，以及用户操作时的数据保存。结合动态时间块样式更新，我们构建了一个功能完善且用户友好的日程调度应用。掌握这些技术对于开发任何需要客户端数据持久化的Web应用都至关重要。

以上就是JavaScript日程调度器：实现数据本地存储与页面持久化的详细内容，更多请关注乐哥常识网其它相关文章！