Daten der Todo Apps persistiert

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "react-basics-2",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gt.mbrnd.de/Max/react-basics.git"
+  },
+  "private": true,
+  "dependencies": {
+    "vite": "^8.1.4"
+  }
+}

react-todolist/src/App.jsx

@@ -1,8 +1,16 @@
-import {useState} from "react";
+import {useState, useEffect} from "react";
+
+const STORAGE_STRING = 'todo-up-todos';
 
 export default function App() {
     const [input, setInput] = useState("");
-    const [todos, setTodos] = useState([]);
+    const [todos, setTodos] = useState(JSON.parse(localStorage.getItem(STORAGE_STRING))||[]);
+
+    useEffect(() => persistTodos(),[todos]);
+
+    function persistTodos() {
+        localStorage.setItem(STORAGE_STRING, JSON.stringify(todos));
+    }
 
     function addTodo() {
         if (input.trim() === "") return;
@@ -30,10 +38,14 @@ export default function App() {
                 </div>
                 <ul id="todo-list-container">
                     {todos.map((todo) => (
-                        <li>
-                            <span onClick={() => toggleTodo(todo.id)}>
-                                {todo.text}: {todo.erledigt ? "bereits " : "noch nicht "} erledigt
-                            </span>
+                        <li key={todo.id}>
+                            <label>
+                                <input
+                                    type="checkbox"
+                                    checked={todo.erledigt}
+                                    onChange={() => toggleTodo(todo.id)}
+                                />{todo.text}
+                            </label>
                             <button onClick={() => deleteTodo(todo.id)}>Entfernen</button>
                         </li>))}
                 </ul>

react-todolist/vite.config.js

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+    server: {
+        port: 3006
+    }
 })

react-unterricht-todolist/src/App.jsx

@@ -3,8 +3,16 @@ import TodoForm from "./components/TodoForm";
 import TodoList from "./components/TodoList";
 import "./App.css";
 
+const STORAGE_STRING = 'todo-app2-todos';
+
 function App() {
-    const [todos, setTodos] = useState([]);
+    const [todos, setTodos] = useState(JSON.parse(localStorage.getItem(STORAGE_STRING)) || []);
+
+    useEffect(() => persistTodos(), [todos]);
+
+    function persistTodos() {
+        localStorage.setItem(STORAGE_STRING, JSON.stringify(todos));
+    }
 
     function addTodo(text, priority) {
         const newTodo = {