Part 6 मा हामीले DOM प्रयोग गरेर dynamic website बनायौँ।अब Part 7 मा — data save गर्ने (Local Storage) सिकौँ 🚀
👉 अब हाम्रो website “real app” जस्तो behave गर्ने छ 😍
🔍 Local Storage भनेको के हो?
👉 Local Storage = Browser भित्र data save गर्ने system
👉 मतलब:
- Page reload भए पनि data हराउँदैन ❌
- Browser बन्द गरे पनि data रहन्छ ✅
👉 Example:To-Do list बनायौ → reload गर्दा पनि tasks रहन्छ
⚡ Local Storage किन important छ?
👉 बिना Local Storage:❌ Data हराउँछ❌ User experience खराब हुन्छ
👉 Local Storage प्रयोग गर्दा:✅ Data persistent हुन्छ✅ Real app feeling आउँछ✅ Offline पनि काम गर्छ
🧠 Basic Methods (Must Know)
1. Data Save गर्ने
localStorage.setItem("name", "Rohan");
2. Data Get गर्ने
var data = localStorage.getItem("name");
console.log(data);
3. Data Delete गर्ने
localStorage.removeItem("name");
4. All Clear गर्ने
localStorage.clear();
🎯 Important Concept (JSON)
👉 Local Storage string मात्र store गर्छ
👉 Object / Array save गर्न:
var arr = ["Task 1", "Task 2"];
localStorage.setItem("tasks", JSON.stringify(arr));
👉 Retrieve गर्दा:
var data = JSON.parse(localStorage.getItem("tasks"));
🔥 Mini Project — Persistent To-Do App (Upgrade Version)
👉 अब हामी Part 6 को To-Do App लाई upgrade गर्छौँ 😍👉 Reload भए पनि tasks हराउने छैन
💻 Full Code (Copy Paste Ready)
<!DOCTYPE html>
<html>
<head>
<title>To-Do App (Saved)</title>
<style>
body {
font-family: Arial;
text-align: center;
margin-top: 50px;
}
input {
padding: 10px;
width: 200px;
}
button {
padding: 10px;
margin-left: 5px;
cursor: pointer;
}
li {
margin: 10px;
list-style: none;
}
</style>
</head>
<body>
<h2>My To-Do List (Saved) 📝</h2>
<input type="text" id="task" placeholder="Enter task">
<button onclick="addTask()">Add</button>
<ul id="list"></ul>
<script>
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
// Page load हुँदा data show गर्ने
function showTasks() {
let list = document.getElementById("list");
list.innerHTML = "";
tasks.forEach((task, index) => {
let li = document.createElement("li");
li.innerHTML = task +
" <button onclick='deleteTask(" + index + ")'>❌</button>";
list.appendChild(li);
});
}
// Add Task
function addTask() {
let input = document.getElementById("task");
let value = input.value;
if (value === "") {
alert("Task खाली छ ❌");
return;
}
tasks.push(value);
localStorage.setItem("tasks", JSON.stringify(tasks));
input.value = "";
showTasks();
}
// Delete Task
function deleteTask(index) {
tasks.splice(index, 1);
localStorage.setItem("tasks", JSON.stringify(tasks));
showTasks();
}
// Initial Load
showTasks();
</script>
</body>
</html>
🎯 के सिक्यौँ?
✅ Local Storage के हो✅ setItem / getItem / removeItem✅ JSON stringify / parse✅ Data save गरेर reload पछि पनि राख्ने✅ Persistent To-Do App बनाउने
🧠 Real-Life Understanding
👉 HTML = घर 🏠👉 CSS = सजावट 🎨👉 JavaScript = control ⚡👉 Local Storage = storage (घरको locker) 🔐
👉 अब:
- User data हराउँदैन
- Website “app” जस्तो हुन्छ
⚠️ Important Notes (Interview Level 🔥)
👉 Local Storage Limit: ~5MB👉 Only string support👉 Same browser मा मात्र काम गर्छ👉 Sensitive data store नगर्नुहोस् ❌
🚀 Next Level Challenge (Try Yourself)
👉 Add these features:
- ✅ Edit task
- ✅ Mark as completed ✔️
- ✅ Clear all button
- ✅ Task count
🚀 Part 8 मा के आउँछ?
👉 Dark Mode Toggle 🌙👉 Theme switching👉 UI interaction advanced
👉 Practice गर 👨💻👉 यो To-Do App लाई upgrade गर
🔥 अब तिमी beginner होइन — builder भइसकेको छौ 🚀
Comments
No comments yet. Be the first to comment!