JavaScript日程调度器：实现数据本地存储与页面重载持久化-html教程-PHP中文网

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

本教程详细讲解如何利用web storage api中的localstorage，在javascript日程调度器中实现用户输入数据的持久化。通过示例代码演示了数据的保存、加载和更新机制，确保页面刷新后内容不丢失，从而提升用户体验和应用实用性。

在构建Web应用程序时，尤其是像日程调度器这类需要用户输入并保存数据的应用，确保数据在页面刷新后依然存在是至关重要的。Web Storage API 提供了一种在客户端存储键值对数据的机制，其中 localStorage 是实现数据持久化的理想选择。本文将指导您如何在日程调度器中集成 localStorage，实现事件内容的保存与加载。

1. 理解 Web Storage API 与 localStorage

Web Storage API 包含 localStorage 和 sessionStorage 两种对象。它们都允许您在用户的浏览器中存储数据，但主要区别在于数据的生命周期：

localStorage: 存储的数据没有过期时间，会一直保留，直到被用户清除或通过脚本删除。非常适合需要长期保存的数据，例如用户偏好设置、离线数据或日程安排。
sessionStorage: 存储的数据仅在当前浏览器会话期间有效。当用户关闭浏览器标签页或窗口时，数据就会被清除。适用于临时性数据。

对于日程调度器，我们显然需要数据持久化，因此 localStorage 是首选。

2. 数据存储策略

为了高效地存储日程数据，我们应该选择一个合适的数据结构。将每个时间块的ID（例如“8AM”、“9AM”）作为键，其对应的事件内容作为值，存储在一个JavaScript对象中，然后将整个对象序列化为JSON字符串存入 localStorage。

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

例如：

{
  "8AM": "参加项目启动会",
  "9AM": "与团队讨论需求",
  "10AM": "编写技术文档"
}

登录后复制

这种结构方便根据时间块ID快速查找和更新内容。

360智图

AI驱动的图片版权查询平台

143

查看详情

3. 实现数据加载：页面初始化时填充内容

当页面加载完成时，我们需要从 localStorage 中读取之前保存的数据，并将其填充到对应的日程文本区域（textarea）中。

$(document).ready(function() {
    // ... 其他初始化代码，如时钟和时间块颜色设置 ...

    var scheduleData = {}; // 用于存储日程内容的JS对象

    // 尝试从 localStorage 加载数据
    var storedData = localStorage.getItem("schedule-items");
    if (storedData) {
        try {
            scheduleData = JSON.parse(storedData);
        } catch (e) {
            console.error("解析 localStorage 数据失败:", e);
            // 如果解析失败，可以清空或重置数据
            scheduleData = {};
        }
    }

    // 遍历 scheduleData 对象，将内容填充到对应的 textarea
    for (var timeId in scheduleData) {
        // 确保该时间ID对应的 textarea 存在
        if ($("#" + timeId).length) {
            $("#" + timeId).val(scheduleData[timeId]);
        }
    }

    // ... 保存事件处理函数将在此处添加 ...
});

登录后复制

代码解析：

scheduleData = {};: 初始化一个空对象，用于在内存中管理日程数据。
localStorage.getItem("schedule-items"): 尝试从 localStorage 获取键为 "schedule-items" 的数据。
JSON.parse(storedData): 由于 localStorage 只能存储字符串，我们使用 JSON.parse() 将获取到的JSON字符串转换回JavaScript对象。为了健壮性，这里添加了 try-catch 块来处理潜在的解析错误。
for (var timeId in scheduleData): 遍历 scheduleData 对象。
$("#" + timeId).val(scheduleData[timeId]): 使用 jQuery 选择器根据时间ID找到对应的 textarea 元素，并将其 value 设置为 scheduleData 中存储的内容。

4. 实现数据保存：按钮点击事件处理

当用户在某个时间块输入内容并点击旁边的保存按钮时，我们需要：

获取当前时间块的ID和用户输入的内容。
更新内存中的 scheduleData 对象。
将更新后的 scheduleData 对象序列化为JSON字符串，并保存到 localStorage。

$(document).ready(function() {
    // ... (加载数据的代码如上) ...
    var scheduleData = {}; // 确保 scheduleData 在此作用域内可见

    var storedData = localStorage.getItem("schedule-items");
    if (storedData) {
        try {
            scheduleData = JSON.parse(storedData);
        } catch (e) {
            console.error("解析 localStorage 数据失败:", e);
            scheduleData = {};
        }
    }
    for (var timeId in scheduleData) {
        if ($("#" + timeId).length) {
            $("#" + timeId).val(scheduleData[timeId]);
        }
    }

    // 绑定保存按钮的点击事件
    $(".saveBtn").on("click", function() {
        // 获取当前按钮所在时间块的 textarea 元素
        var textareaElement = $(this).siblings(".description");
        var inputValue = textareaElement.val(); // 获取 textarea 的值
        var inputId = textareaElement.attr("id"); // 获取 textarea 的 ID

        // 更新内存中的 scheduleData 对象
        scheduleData[inputId] = inputValue;

        // 将更新后的数据保存到 localStorage
        localStorage.setItem("schedule-items", JSON.stringify(scheduleData));

        // 可选：提供用户反馈，例如显示一个“已保存”提示
        alert("日程已保存！");
    });

    // ... (原始的时间块颜色设置代码) ...
    var elements = $(".time-block");
    var d = new Date();
    var h = d.getHours();

    for (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');
        } else if (h > 16 || h < 9) { // 修正逻辑：工作时间外设为未来或根据实际需求调整
            // 这里的逻辑可能需要根据实际的“工作日”定义进行微调
            // 例如，如果一天只有9-17点是工作时间，其他时间可以视为未来或非工作时间
            // 目前的代码块是根据 data-hour 和当前小时 h 进行比较
            // 原始的 h > 16 && h < 9 永远不会为真
            // 应该基于时间块的上下文来判断
            // 在此示例中，我们主要关注数据持久化，时间块颜色逻辑保持原样
        }
    }
});

登录后复制

代码解析：

$(".saveBtn").on("click", function()): 为所有带有 saveBtn 类的按钮绑定点击事件。
$(this).siblings(".description"): $(this) 指代当前被点击的保存按钮。siblings(".description") 找到与按钮同级且类名为 description 的元素，即对应的 textarea。
textareaElement.val() 和 textareaElement.attr("id"): 获取 textarea 的当前值和其 id。
scheduleData[inputId] = inputValue;: 使用获取到的 id 作为键，inputValue 作为值，更新 scheduleData 对象。
localStorage.setItem("schedule-items", JSON.stringify(scheduleData));: 使用 JSON.stringify() 将更新后的 scheduleData 对象转换成JSON字符串，并保存到 localStorage。

5. 完整的 JavaScript 代码示例

整合上述加载和保存逻辑，并结合原始的时间块颜色设置，得到以下优化后的 script.js 内容：

// 初始化时钟显示
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() {
    // 用于存储日程内容的JS对象
    var scheduleData = {};

    // 1. 页面加载时，从 localStorage 加载数据并填充到 textarea
    var storedData = localStorage.getItem("schedule-items");
    if (storedData) {
        try {
            scheduleData = JSON.parse(storedData);
        } catch (e) {
            console.error("解析 localStorage 数据失败:", e);
            // 如果解析失败，重置数据以避免后续错误
            scheduleData = {};
        }
    }

    // 遍历 scheduleData 对象，将内容填充到对应的 textarea
    for (var timeId in scheduleData) {
        // 确保该时间ID对应的 textarea 存在
        if ($("#" + timeId).length) {
            $("#" + timeId).val(scheduleData[timeId]);
        }
    }

    // 2. 绑定保存按钮的点击事件
    $(".saveBtn").on("click", function() {
        // 获取当前按钮所在时间块的 textarea 元素
        var textareaElement = $(this).siblings(".description");
        var inputValue = textareaElement.val(); // 获取 textarea 的值
        var inputId = textareaElement.attr("id"); // 获取 textarea 的 ID

        // 更新内存中的 scheduleData 对象
        scheduleData[inputId] = inputValue;

        // 将更新后的数据保存到 localStorage
        localStorage.setItem("schedule-items", JSON.stringify(scheduleData));

        // 可选：提供用户反馈
        // 例如，可以短暂显示一个“已保存！”的提示
        // alert("日程已保存！");
        console.log("日程 [" + inputId + "] 已保存:", inputValue);
    });

    // 3. 设置时间块的颜色 (过去、现在、未来)
    var elements = $(".time-block");
    var d = new Date();
    var currentHour = d.getHours(); // 获取当前小时 (0-23)

    for (var i = 0; i < elements.length; i++) {
        var blockHour = parseInt(elements[i].getAttribute("data-hour")); // 获取时间块定义的小时

        // 移除所有现有颜色类，确保只应用一个
        elements[i].classList.remove('past', 'present', 'future');

        if (currentHour < blockHour) {
            elements[i].classList.add('future');
        } else if (currentHour > blockHour) {
            elements[i].classList.add('past');
        } else { // currentHour === blockHour
            elements[i].classList.add('present');
        }
    }
});

登录后复制

6. 注意事项与最佳实践

数据类型: localStorage 只能存储字符串。因此，当存储JavaScript对象或数组时，必须使用 JSON.stringify() 将其转换为JSON字符串；读取时，使用 JSON.parse() 转换回原始数据类型。
存储限制: localStorage 的存储容量通常在 5MB 到 10MB 之间（因浏览器而异）。对于大多数日程应用来说这已足够，但如果需要存储大量富文本或文件，则需考虑其他存储方案（如 IndexedDB）。
安全性: localStorage 中的数据并未加密，不适合存储敏感信息。任何可以访问客户端脚本的代码都可以读取或修改 localStorage 中的数据。
用户体验: 在数据保存成功后，可以考虑给用户一个视觉反馈，例如短暂显示一个“已保存”的提示信息，而不是简单的 alert() 弹窗，以提高用户体验。
错误处理: 在 JSON.parse() 操作中加入 try-catch 块是一个好习惯，可以防止因存储数据损坏或格式错误导致应用崩溃。