本教程详细介绍了如何在javascript工作日计划应用中使用`localstorage`实现数据持久化。我们将学习如何初始化、保存和重新加载日程事件数据，确保用户在刷新页面后仍能看到之前输入的日程安排，并优化数据存储逻辑以避免重复和确保数据更新。
在现代Web应用开发中，数据持久化是一个常见需求，尤其对于像日程计划器这类需要保存用户输入的应用。Web Storage API，特别是localStorage，提供了一种在浏览器端存储键值对数据的简便方法，并且这些数据在浏览器会话结束后仍然保留，即实现了页面重载后的数据持久化。本教程将指导您如何在工作日计划应用中集成和优化localStorage的使用。
1. 理解 localStorage 的基本操作
localStorage 是一个全局对象，它提供了以下几个核心方法：
- localStorage.setItem(key, value): 将数据保存到localStorage。key和value都必须是字符串。
- localStorage.getItem(key): 从localStorage获取数据。如果key不存在，则返回null。
- localStorage.removeItem(key): 从localStorage删除指定key的数据。
- localStorage.clear(): 清除localStorage中的所有数据。
由于localStorage只能存储字符串，因此在存储JavaScript对象或数组时，需要使用JSON.stringify()将其转换为JSON字符串；在读取时，则需要使用JSON.parse()将其解析回JavaScript对象或数组。
2. 初始化与数据加载
为了在页面加载时显示之前保存的日程，我们需要在$(document).ready()事件中执行以下操作：
- 从localStorage尝试获取保存的数据。
- 如果数据存在，将其解析为JavaScript数组。
- 遍历该数组，并将每个日程事件的内容填充到对应的textarea元素中。
// ... 其他代码 ...
$(document).ready(function() {
var scheduleContent = []; // 用于存储日程数据的内存数组
// 函数：从localStorage加载日程并渲染到UI
function loadSchedule() {
var getLocalStorageData = JSON.parse(localStorage.getItem("schedule-items"));
if (getLocalStorageData !== null) {
scheduleContent = getLocalStorageData; // 更新内存数组
// 遍历加载的数据，并填充到对应的textarea元素中
scheduleContent.forEach(function(item) {
// 确保通过正确的ID找到textarea并设置其值
$("#" + item["input-id"]).val(item["input-value"]);
});
}
}
// 页面加载时调用，以显示之前保存的日程
loadSchedule();
// ... 其他代码 ...
});3. 优化数据保存逻辑
原始代码在保存时简单地将新数据push到数组中，这可能导致重复条目。为了确保每个时间段只有一个日程，我们需要在保存时检查该时间段是否已有日程：
- 获取当前textarea的值和ID。
- 检查scheduleContent数组中是否已存在具有相同input-id的条目。
- 如果存在，则更新该条目的input-value。
- 如果不存在，则添加一个新条目。
- 如果textarea的值为空，则应从scheduleContent中移除对应的条目。
- 将更新后的scheduleContent数组转换为JSON字符串并保存到localStorage。
// ... 其他代码 ...
$(document).ready(function() {
// ... loadSchedule() 和 loadSchedule() 调用 ...
// 保存按钮点击事件处理
$("button").on("click", function() {
var container = $(this).parent().parent();
// 获取textarea的值，并去除首尾空格
var inputValue = container.find("textarea").val().trim();
// 获取textarea的ID
var inputId = container.find("textarea").attr("id");
if (inputValue !== "") {
// 查找是否已存在相同input-id的日程
var existingIndex = scheduleContent.findIndex(item => item["input-id"] === inputId);
if (existingIndex > -1) {
// 如果存在，更新现有日程的值
scheduleContent[existingIndex]["input-value"] = inputValue;
} else {
// 如果不存在，添加新日程
var textObj = {
"input-id": inputId,
"input-value": inputValue
};
scheduleContent.push(textObj);
}
} else {
// 如果输入值为空，则从日程列表中移除该项（如果存在）
scheduleContent = scheduleContent.filter(item => item["input-id"] !== inputId);
}
// 将更新后的日程数组保存到localStorage
localStorage.setItem("schedule-items", JSON.stringify(scheduleContent));
// 可选：提供用户反馈
alert("日程已保存！");
});
// ... 时间块颜色逻辑 ...
});4. 完整的JavaScript实现
将上述加载和保存逻辑与原有的时间显示和时间块颜色标记功能结合，得到一个完整且功能优化的JavaScript文件：
// 实时时钟显示
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);
// DOM加载完成后执行
$(document).ready(function() {
var scheduleContent = []; // 用于存储日程数据的内存数组
// 函数：从localStorage加载日程并渲染到UI
function loadSchedule() {
// 尝试从localStorage获取数据并解析
var getLocalStorageData = JSON.parse(localStorage.getItem("schedule-items"));
if (getLocalStorageData !== null) {
scheduleContent = getLocalStorageData; // 更新内存数组
// 遍历加载的数据，并填充到对应的textarea元素中
scheduleContent.forEach(function(item) {
// 使用jQuery选择器通过ID找到textarea并设置其值
$("#" + item["input-id"]).val(item["input-value"]);
});
}
}
// 页面加载时调用，以显示之前保存的日程
loadSchedule();
// 保存按钮点击事件处理
$("button").on("click", function() {
var container = $(this).parent().parent();
// 获取textarea的值，并去除首尾空格，确保数据干净
var inputValue = container.find("textarea").val().trim();
// 获取textarea的ID，用于唯一标识日程条目
var inputId = container.find("textarea").attr("id");
if (inputValue !== "") {
// 查找是否已存在相同input-id的日程
var existingIndex = scheduleContent.findIndex(item => item["input-id"] === inputId);
if (existingIndex > -1) {
// 如果存在，更新现有日程的值
scheduleContent[existingIndex]["input-value"] = inputValue;
} else {
// 如果不存在，添加新日程对象
var textObj = {
"input-id": inputId,
"input-value": inputValue
};
scheduleContent.push(textObj);
}
} else {
// 如果输入值为空，则从日程列表中移除该项（如果存在）
scheduleContent = scheduleContent.filter(item => item["input-id"] !== inputId);
}
// 将更新后的日程数组转换为JSON字符串并保存到localStorage
localStorage.setItem("schedule-items", JSON.stringify(scheduleContent));
// 可选：提供用户保存成功的反馈
alert("日程已保存！");
});
// 时间块颜色标记逻辑
var elements = $(".time-block");
var d = new Date();
var h = d.getHours(); // 获取当前小时 (0-23)
for (let 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', 'present');
} else if (h > t) {
// 当前小时大于时间块小时，标记为过去 (灰色)
elements[i].classList.add('past');
elements[i].classList.remove('future', 'present');
} else if (h === t) {
// 当前小时等于时间块小时，标记为现在 (红色)
elements[i].classList.add('present');
elements[i].classList.remove('future', 'past');
}
// 原始代码中的 'else if (h > 16 && h < 9)' 逻辑上不可能，已移除。
// 如果需要处理跨天或特定时间段的特殊颜色，应重新设计逻辑。
}
});5. 注意事项与最佳实践
- 数据结构设计: 对于更复杂的应用，您可能需要更精细的数据结构，例如包含日期信息，以便管理多天的日程。
- 错误处理: JSON.parse()在处理无效JSON字符串时会抛出错误。在实际应用中，您可能需要使用try-catch块来处理这种情况，以防止应用崩溃。
- 用户体验: 除了alert()，可以考虑更友好的用户反馈方式，例如短暂显示“保存成功”的消息或改变保存按钮的样式。
- 存储限制: localStorage的存储容量有限（通常为5-10MB，具体取决于浏览器）。对于大量数据，应考虑服务器端存储或其他客户端存储方案（如IndexedDB）。
- 安全性: localStorage不适合存储敏感信息，因为它容易被客户端脚本访问。
- 浏览器兼容性: localStorage已被所有现代浏览器广泛支持，但在极少数旧版浏览器中可能需要回退方案。
通过以上步骤，您的工作日计划应用将能够有效地利用localStorage实现日程数据的持久化，为用户提供更稳定和便捷的使用体验。
