Local Storage allows you to save data in the user’s browser so it persists even after page refresh or closing the browser.

There are two types:

---

🔹 1. localStorage

• Stores data permanently (until manually deleted)
• Data stays even after browser is closed

✅ Syntax:

// Save data
localStorage.setItem("key", "value");// Get data
localStorage.getItem("key");// Remove one item
localStorage.removeItem("key");// Clear all
localStorage.clear();

📌 Example:

localStorage.setItem("username", "Aditya");let user = localStorage.getItem("username");
console.log(user); // Aditya

---

🔹 2. sessionStorage

• Stores data temporarily
• Data is deleted when the tab is closed

✅ Syntax:

sessionStorage.setItem("key", "value");
sessionStorage.getItem("key");
sessionStorage.removeItem("key");
sessionStorage.clear();

📌 Example:

sessionStorage.setItem("theme", "dark");let theme = sessionStorage.getItem("theme");
console.log(theme); // dark

---

🔥 Key Difference

Feature	localStorage	sessionStorage
Lifetime	Permanent	Tab session only
Storage Limit	~5MB	~5MB
Accessible	Same origin only	Same origin only

---

💡 Important Notes

• Data is stored as strings only
• To store objects/arrays → use JSON.stringify()

Example:

let user = {name: "Aditya", age: 22};// Save
localStorage.setItem("user", JSON.stringify(user));// Get
let data = JSON.parse(localStorage.getItem("user"));
console.log(data.name);

---

🧪 Practice: Todo App with Local Storage

🎯 Goal:

• Add tasks
• Delete tasks
• Save tasks in localStorage
• Load tasks on refresh

---

✅ Basic HTML

<input type="text" id="taskInput" placeholder="Enter task">
<button onclick="addTask()">Add</button><ul id="taskList"></ul>

---

✅ JavaScript

let tasks = JSON.parse(localStorage.getItem("tasks")) || [];function displayTasks() {
    let list = document.getElementById("taskList");
    list.innerHTML = "";    tasks.forEach((task, index) => {
        let li = document.createElement("li");
        li.innerHTML = `
            ${task}
            <button onclick="deleteTask(${index})">❌</button>
        `;
        list.appendChild(li);
    });
}function addTask() {
    let input = document.getElementById("taskInput");
    let task = input.value;    if (task === "") return;    tasks.push(task);
    localStorage.setItem("tasks", JSON.stringify(tasks));    input.value = "";
    displayTasks();
}function deleteTask(index) {
    tasks.splice(index, 1);
    localStorage.setItem("tasks", JSON.stringify(tasks));
    displayTasks();
}// Load tasks on page load
displayTasks();

---

🚀 What You Learn from This

• DOM manipulation
• Array handling
• localStorage usage
• Data persistence