| کانال توسعه‌دهندگان جاوااسکریپت |
ساخت TODO List یکی از بهترین تمرین‌های واقعی برای جا افتادن مفاهیم DOM، event ها و ذخیره داده‌ها در مرورگر است. این بار بدون React و فریم‌ورک، فقط با Vanilla JS و LocalStorage 💪
منبع اصلی ایده و توضیحات: آموزش MDN درباره Web Storage API و مستندات DOM Manipulation.
ایده کلی 👇
یک فرم ساده داریم برای اضافه‌کردن task ها، لیست را با JS توی DOM رندر می‌کنیم و هر تغییری که کاربر می‌دهد را در localStorage ذخیره می‌کنیم تا بعد از refresh هم از بین نرود.
نکته خوبش این است که با همین مثال ساده، چند تا چیز مهم جا می‌افتد:
• کار با querySelector و ساخت element های جدید
• مدیریت event ها مثل submit و click
• تبدیل array به string و برعکس با JSON.stringify و JSON.parse
• sync نگه‌داشتن UI با state ذخیره‌شده در localStorage
یک اسکلت ساده از کد 👇
<!-- index.html -->
<form id="todo-form">
<input id="todo-input" placeholder="کار جدید..." />
<button type="submit">اضافه کن</button>
</form>
<ul id="todo-list"></ul>
<script src="app.js"></script>
و فایل جاوااسکریپت:
// app.js
const form = document.querySelector("#todo-form");
const input = document.querySelector("#todo-input");
const list = document.querySelector("#todo-list");
const STORAGE_KEY = "jsdev_todos";
let todos = loadTodos();
render();
form.addEventListener("submit", (e) => {
e.preventDefault();
const text = input.value.trim();
if (!text) return;
todos.push({ id: Date.now(), text });
input.value = "";
saveTodos();
render();
});
list.addEventListener("click", (e) => {
if (!e.target.matches("button[data-id]")) return;
const id = Number(e.target.dataset.id);
todos = todos.filter((t) => t.id !== id);
saveTodos();
render();
});
function loadTodos() {
const raw = localStorage.getItem(STORAGE_KEY);
try {
return raw ? JSON.parse(raw) : [];
} catch {
return [];
}
}
function saveTodos() {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
}
function render() {
list.innerHTML = "";
todos.forEach((todo) => {
const li = document.createElement("li");
li.textContent = todo.text + " ";
const btn = document.createElement("button");
btn.textContent = "حذف";
btn.dataset.id = todo.id;
li.appendChild(btn);
list.appendChild(li);
});
}
چند نکته ریز ولی مهم 🧠
• همیشه روی داده localStorage یک try...catch بگذار که اگر خراب شد (مثلاً دستی ویرایش شده بود) اپ کرش نکند.
• از یک key ثابت مثل jsdev_todos استفاده کن تا اگر بعداً چند بخش دیگر هم اضافه شد، تداخل نداشته باشند.
• برای id ها اینجا از Date.now() استفاده شده، که برای پروژه‌های کوچک کافی است.
با همین ساختار پایه می‌شود بعدها checkbox برای completed، فیلتر، و حتی sync ساده با backend هم اضافه کرد. یک بار این نمونه را تا انتها بساز، بعد هر جای اپ‌های واقعی که state و UI sync می‌شوند خیلی قابل فهم‌تر به نظر می‌رسد ⚡️
اگر ساختی و کمی شخصی‌سازی‌اش کردی، نسخه‌ات را برای بقیه بچه‌های جاوااسکریپت هم بفرست؛ همین مثال‌های کوچک کم‌کم تبدیل به component و pattern های جدی‌تر می‌شوند.
🔖 #Javascript #JS #جاوااسکریپت #JavaScript #LocalStorage #DOM #VanillaJS #Frontend
👤 Developix
💎 Channel: @DevelopixJavascript
22 · 1.5K ·