背景介绍
本项目旨在实现一个简单的Todo任务管理应用，用户可以通过输入任务内容并保存到本地文件中。该应用利用HTML、CSS和JavaScript技术完成，重点实现文件读写功能，掌握文件操作和数据结构的知识。
本项目要求在本地环境中无依赖框架或外部服务，确保代码可运行。
思路分析
- HTML/CSS结构：
使用HTML创建表格表格，通过CSS样式美化界面。 - JavaScript核心功能：
实现文件读写操作，利用localStorage在浏览器中保存和读取数据。 - 数据结构：
采用JSON格式保存Todo任务，便于后续读取和处理。 - 学习价值：
掌握文件读写、数据结构和浏览器本地存储的使用方式。
代码实现
前端部分（HTML/CSS）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todo App</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Todo App</h1>
输入任务内容并保存到本地文件
<script>
// 初始化localStorage
if (!localStorage.getItem('todos')) {
localStorage.setItem('todos', '[]');
}
function addTodo(task) {
const todos = JSON.parse(localStorage.getItem('todos'));
todos.push(task);
localStorage.setItem('todos', JSON.stringify(todos));
}
function loadTodos() {
const todos = JSON.parse(localStorage.getItem('todos'));
if (todos) {
document.getElementById('todo-list').innerHTML = `
<div>${todos.join(', ')}</div>`;
} else {
document.getElementById('todo-list').innerHTML = "无任务";
}
}
// 初始化
loadTodos();
</script>
</body>
</html>
后端部分（JavaScript）
// 本地文件操作
function saveToLocalStorage(todoList) {
localStorage.setItem('todos', JSON.stringify(todoList));
}
function loadFromLocalStorage() {
try {
const todos = JSON.parse(localStorage.getItem('todos'));
document.getElementById('todo-list').innerHTML = '[' + todos.join(', ') + ']';
} catch (error) {
console.error('保存失败:', error);
}
}
// 实现函数
function addTodo(task) {
const todos = JSON.parse(localStorage.getItem('todos'));
todos.push(task);
saveToLocalStorage(todos);
}
document.getElementById('todo-list').addEventListener('click', function () {
const input = document.getElementById('todo-input');
const task = input.value.trim();
if (task === '') return;
addTodo(task);
loadFromLocalStorage();
});
总结
本项目通过 JavaScript 实现了一个简单的 Todo 任务管理应用，用户可输入任务内容并保存到浏览器本地文件中，方便后续读取。主要学习了文件读写、数据结构和浏览器本地存储的使用。
学习价值：掌握文件操作、数据结构和浏览器本地存储的使用方式。
难度：中级，1~3天完成。
学习点：文件操作、数据结构、API 调用。
该实现可在本地环境中运行，无需依赖框架或外部服务，确保代码可运行。