如何在ReactJS中结合localStorage实现待办事项列表管理

核心实现代码 #

import React, { useState, useEffect } from 'react';

const TodoList = () => {
    const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('todos')) || []);
    const [newTodo, setNewTodo] = useState('');

    const addTodo = () => {
        if (newTodo.trim() !== '') {
            setTodos([...todos, { id: Date.now(), text: newTodo, completed: false }]);
            setNewTodo('');
        }
    };

    const deleteTodo = (id) => {
        setTodos(todos.filter((todo) => todo.id !== id));
    };

    const updateTodo = (id) => {
        setTodos(
            todos.map((todo) =>
                todo.id === id ? { ...todo, completed: !todo.completed } : todo
            )
        );
    };

    useEffect(() => {
        localStorage.setItem('todos', JSON.stringify(todos));
    }, [todos]);

    return (
        <div>
            <h2>Todo List</h2>
            <ul>
                {todos.map((todo) => (
                    <li key={todo.id}>
                        <input
                            type="checkbox"
                            checked={todo.completed}
                            onChange={() => updateTodo(todo.id)}
                        />
                        <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
                            {todo.text}
                        </span>
                        <button onClick={() => deleteTodo(todo.id)}>Delete</button>
                    </li>
                ))}
            </ul>
            <div>
                <input
                    type="text"
                    value={newTodo}
                    onChange={(e) => setNewTodo(e.target.value)}
                />
                <button onClick={addTodo}>Add Todo</button>
            </div>
        </div>
    );
};

export default TodoList;

操作与效果说明 #

• 尝试操作：在输入框输入"整理桌面""提交周报"这类待办内容，点击"Add Todo"添加；点击待办项前的复选框切换完成状态；点击"Delete"按钮删除对应待办；完成操作后刷新页面。
• 预期效果：添加的待办实时显示在列表中，勾选后文字显示删除线，删除后待办从列表移除；刷新页面后，所有之前的待办数据（包括完成状态）都能完整保留，不会丢失。
• 实际运行结果：所有操作均按预期执行，列表实时响应操作变化，localStorage会自动同步更新后的待办数据；刷新页面后，待办列表完全恢复，各项状态与操作前一致，成功实现了数据持久化。

内容的提问来源于stack exchange，提问作者The Magic