| کانال توسعه‌دهندگان جاوااسکریپت |

\n\nو فایل جاوااسکریپت:\n\n// app.js\nconst form = document.querySelector(\"#todo-form\");\nconst input = document.querySelector(\"#todo-input\");\nconst list = document.querySelector(\"#todo-list\");\n\nconst STORAGE_KEY = \"jsdev_todos\";\nlet todos = loadTodos();\nrender();\n\nform.addEventListener(\"submit\", (e) => {\n e.preventDefault();\n const text = input.value.trim();\n if (!text) return;\n\n todos.push({ id: Date.now(), text });\n input.value = \"\";\n saveTodos();\n render();\n});\n\nlist.addEventListener(\"click\", (e) => {\n if (!e.target.matches(\"button[data-id]\")) return;\n const id = Number(e.target.dataset.id);\n todos = todos.filter((t) => t.id !== id);\n saveTodos();\n render();\n});\n\nfunction loadTodos() {\n const raw = localStorage.getItem(STORAGE_KEY);\n try {\n return raw ? JSON.parse(raw) : [];\n } catch {\n return [];\n }\n}\n\nfunction saveTodos() {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));\n}\n\nfunction render() {\n list.innerHTML = \"\";\n todos.forEach((todo) => {\n const li = document.createElement(\"li\");\n li.textContent = todo.text + \" \";\n\n const btn = document.createElement(\"button\");\n btn.textContent = \"حذف\";\n btn.dataset.id = todo.id;\n\n li.appendChild(btn);\n list.appendChild(li);\n });\n}\n\nچند نکته ریز ولی مهم 🧠\n• همیشه روی داده localStorage یک try...catch بگذار که اگر خراب شد (مثلاً دستی ویرایش شده بود) اپ کرش نکند.\n• از یک key ثابت مثل jsdev_todos استفاده کن تا اگر بعداً چند بخش دیگر هم اضافه شد، تداخل نداشته باشند.\n• برای id ها اینجا از Date.now() استفاده شده، که برای پروژه‌های کوچک کافی است.\n\nبا همین ساختار پایه می‌شود بعدها checkbox برای completed، فیلتر، و حتی sync ساده با backend هم اضافه کرد. یک بار این نمونه را تا انتها بساز، بعد هر جای اپ‌های واقعی که state و UI sync می‌شوند خیلی قابل فهم‌تر به نظر می‌رسد ⚡️\n\nاگر ساختی و کمی شخصی‌سازی‌اش کردی، نسخه‌ات را برای بقیه بچه‌های جاوااسکریپت هم بفرست؛ همین مثال‌های کوچک کم‌کم تبدیل به component و pattern های جدی‌تر می‌شوند.\n\n🔖 #Javascript #JS #جاوااسکریپت #JavaScript #LocalStorage #DOM #VanillaJS #Frontend\n\n👤 Developix\n\n💎 Channel: @DevelopixJavascript","datePublished":"2026-07-14T17:00:27Z","dateModified":"2026-07-14T17:00:27Z","author":{"@type":"Organization","name":"| کانال توسعه‌دهندگان جاوااسکریپت |","url":"https://telemetr.io/ch/channels/1942875334-developixjavascript","image":"https://img.telemetr.io/c/27u6CW/5823301833593045169?ty=x"},"publisher":{"@type":"Organization","name":"| کانال توسعه‌دهندگان جاوااسکریپت |","url":"https://telemetr.io/ch/channels/1942875334-developixjavascript","image":"https://img.telemetr.io/c/27u6CW/5823301833593045169?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1512},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":22}]}}]}