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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-19

浏览次数：次

返回列表

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

本教程将详细介绍如何利用浏览器 local storage api 实现网页数据的持久化存储，确保用户在刷新页面后数据不丢失。我们将以一个工作日日程表应用为例，演示如何保存和加载日程事件，并提供代码示例与最佳实践，帮助开发者构建具备数据持久化功能的web应用。

在现代Web应用开发中，数据持久化是一个核心需求，尤其对于日程管理这类需要保存用户输入的应用。当用户在网页上输入数据后，期望这些数据能够在页面刷新甚至浏览器关闭后依然存在。本文将以一个工作日日程表为例，深入探讨如何使用浏览器提供的 Local Storage API 来实现这一目标。

Local Storage API 核心概念

Local Storage 是 Web Storage API 的一部分，它允许网站在用户的浏览器中存储键值对数据，并且这些数据在浏览器关闭后仍然会保留，直到被用户清除或通过代码删除。它的主要特点包括：

持久性： 数据没有过期时间，除非手动清除。
同源策略： 不同源的页面不能访问彼此的 Local Storage 数据。
容量： 通常每个源有 5MB 到 10MB 的存储限制。
API 简洁： 提供简单的方法进行数据的存取。

常用的 Local Storage 方法：

localStorage.setItem(key, value)：将键值对存储到 Local Storage。value 必须是字符串。
localStorage.getItem(key)：根据 key 获取对应的 value。如果 key 不存在，返回 null。
localStorage.removeItem(key)：根据 key 删除对应的键值对。
localStorage.clear()：清除所有存储在当前源下的 Local Storage 数据。

由于 Local Storage 只能存储字符串，当需要存储 J*aScript 对象或数组时，必须使用 JSON.stringify() 将其转换为 JSON 字符串，并在读取时使用 JSON.parse() 将其解析回 J*aScript 对象。

分析现有代码的持久化实现与问题点

提供的代码已经尝试使用 Local Storage 来保存日程数据，但存在一些可以改进的地方。

现有 J*aScript 代码片段：

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

问题点分析：

数据加载后未填充 UI： 尽管 getLocalStorageData 从 Local Storage 中获取了数据，并将其赋值给了 scheduleContent 变量，但这些数据并没有被渲染到页面上对应的元素中。因此，用户刷新页面后，虽然数据在 scheduleContent 变量中，但日程表界面仍显示为空。
数据保存逻辑待优化： 当前的保存逻辑 scheduleContent.push(textObj) 每次点击保存按钮时都会向 scheduleContent 数组中添加一个新的对象。这意味着如果用户多次修改并保存同一个时间段的日程，数组中会存在多个相同 input-id 但不同 input-value 的条目，导致数据冗余和管理混乱。更理想的方式是，如果该时间段的日程已存在，则更新其内容；如果不存在，则添加。
数据结构选择： 对于日程表这种按特定时间段（ID）存储内容的场景，使用 J*aScript 对象（哈希表/字典）来存储数据会比数组更高效和直观。键可以是时间块的 ID（如 "8AM"），值是对应的日程内容。

逐步优化与实现

我们将针对上述问题进行优化，实现一个功能完善、数据持久化的工作日日程表。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

步骤一：初始化数据结构并加载现有数据

首先，我们将 scheduleContent 变量初始化为一个对象，并在页面加载时尝试从 Local Storage 中加载数据。如果 Local Storage 中有数据，则解析并使用它；否则，初始化为空对象。

$(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() 函数中，紧接着数据加载逻辑之后，我们需要遍历 scheduleContent 对象，并将其中保存的日程内容填充到页面上对应的元素中。

$(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);
    });

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

这里我们使用了 jQuery 的 $.each 方法来遍历 scheduleContent 对象，根据其键（即的 id）找到对应的元素并设置其 value。

步骤三：改进数据保存逻辑

当用户点击保存按钮时，我们将不再 push 到数组，而是直接使用的 id 作为键，更新 scheduleContent 对象中对应的值，然后将整个 scheduleContent 对象保存到 Local Storage。

$(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("日程已保存！");
    });

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

通过这种方式，scheduleContent 始终保持为最新的日程数据集合，并且 Local Storage 中的数据也始终与 scheduleContent 同步。

完整 J*aScript 代码示例

结合上述优化，以下是修改后的 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() {
    // 声明 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。
    }
});

关键注意事项

错误处理： JSON.parse() 在尝试解析非 JSON 格式的字符串时会抛出错误。在实际应用中，建议使用 try-catch 块来处理这种情况，以防止应用崩溃。
存储限制： Local Storage 的存储容量有限。对于存储大量数据的应用，应考虑使用 IndexedDB 或服务器端数据库。
数据安全性： Local Storage 中的数据是明文存储的，不适合存储敏感信息。任何可以访问用户浏览器的脚本都可以读取这些数据。
用户体验： 在数据保存成功后，提供视觉或文字反馈（如弹窗提示、状态栏消息）可以提升用户体验。
数据结构设计： 根据应用需求选择合适的数据结构。对于按 ID 快速查找和更新的场景，对象（哈希表）通常优于数组。

总结

通过本教程，我们学习了如何利用 Local Storage API 实现网页数据的持久化。关键在于理解 localStorage.setItem() 和 localStorage.getItem() 的用法，以及如何结合 JSON.stringify() 和 JSON.parse() 处理 J*aScript 对象。通过优化数据结构和加载/保存逻辑，我们成功构建了一个能够保存并持久化日程事件的工作日日程表应用。掌握 Local Storage 是前端开发者的基本技能之一，对于构建交互式、用户友好的 Web 应用至关重要。