Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için herhangi bir sunucu tarafı diline veya karmaşık bir framework'e ihtiyacınız yoktur. Sadece modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve temel bir kod editörü (VS Code gibi) yeterlidir.

• HTML5: Sayfa iskeletini oluşturmak için.
• CSS3: Arayüzü düzenlemek için.
• JavaScript (ES6+): Mantıksal işlemleri yönetmek için.
• Tarayıcı Geliştirici Araçları: Hata ayıklama ve LocalStorage takibi için.

Çalışmaya başlamadan önce proje klasörünüzde index.html, style.css ve app.js dosyalarını oluşturduğunuzdan emin olun.

HTML Yapısının Kurulması

Uygulamamızın temelini oluşturan HTML yapısı, kullanıcıdan girdi alacak bir input alanı, ekleme butonu ve görevlerin listeleneceği bir konteynerden oluşmalıdır. Semantic (anlamsal) HTML etiketleri kullanmak, SEO ve erişilebilirlik açısından kritik öneme sahiptir.

  
Yapılacaklar Listesi
  

    
    Ekle
  
  

Yukarıdaki kod bloğunda, todoInput ile kullanıcının veri girmesini sağlıyor, addBtn ile bu veriyi işliyoruz. todoList ise görevlerin dinamik olarak ekleneceği liste elemanıdır.

LocalStorage ile Veri Yönetimi

LocalStorage, anahtar-değer (key-value) mantığıyla çalışan, tarayıcıda veri saklama alanıdır. JavaScript'te localStorage.setItem() ile veri yazar, localStorage.getItem() ile veri okuruz. Ancak LocalStorage sadece metin (string) saklayabilir; bu yüzden nesnelerimizi JSON.stringify() ile metne, JSON.parse() ile tekrar nesneye çevirmeliyiz.

// Görevleri LocalStorage'a kaydetme fonksiyonu
function saveToLocalStorage(todos) {
  localStorage.setItem('myTodos', JSON.stringify(todos));
}

// LocalStorage'dan görevleri çekme fonksiyonu
function getFromLocalStorage() {
  const data = localStorage.getItem('myTodos');
  return data ? JSON.parse(data) : [];
}

Bu fonksiyonlar, uygulamanızın kalbidir. Veri her değiştiğinde saveToLocalStorage fonksiyonunu çağırarak güncel listeyi tarayıcı hafızasına yazarız.

Görev Ekleme ve Listeleme Mantığı

Kullanıcı "Ekle" butonuna tıkladığında, input değerini alıp bir diziye eklemeli ve bu diziyi ekrana yansıtmalıyız. DOM manipülasyonu yaparak her görev için yeni bir li elemanı oluşturacağız.

const todoInput = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const todoList = document.getElementById('todoList');

addBtn.addEventListener('click', () => {
  const task = todoInput.value;
  if (task === '') return; // Boş görev eklenmesini engelle

  const todos = getFromLocalStorage();
  todos.push({ text: task, completed: false });
  saveToLocalStorage(todos);
  renderTodos();
  todoInput.value = ''; // Input'u temizle
});

Burada renderTodos() fonksiyonu, LocalStorage'daki verileri okuyup HTML listesini güncelleyen yardımcı bir fonksiyondur. Bu yaklaşım, kodun tekrar kullanılabilirliğini artırır.

Görev Silme ve Durum Güncelleme

Bir görevi silmek veya tamamlandı olarak işaretlemek için görevlere benzersiz bir kimlik (ID) atamak veya dizideki indekslerini kullanmak gerekir. Aşağıdaki örnekte, dizideki indeks numarasını kullanarak silme işlemini gerçekleştiriyoruz.

function deleteTodo(index) {
  let todos = getFromLocalStorage();
  todos.splice(index, 1);
  saveToLocalStorage(todos);
  renderTodos();
}

// Listeyi ekrana basan render fonksiyonu
function renderTodos() {
  const todos = getFromLocalStorage();
  todoList.innerHTML = '';
  todos.forEach((todo, index) => {
    const li = document.createElement('li');
    li.innerHTML = `${todo.text} Sil`;
    todoList.appendChild(li);
  });
}

Bu yöntemle, her silme işleminden sonra LocalStorage güncellenir ve arayüz otomatik olarak tazelenir. Kullanıcı deneyimi açısından, işlem sonrası ekranın güncellenmesi oldukça önemlidir.

LocalStorage Kullanım Yöntemleri Karşılaştırması

Kritik Güvenlik Uyarısı: LocalStorage, XSS (Cross-Site Scripting) saldırılarına karşı savunmasızdır. Kullanıcıdan alınan verileri doğrudan innerHTML içine yerleştirmek yerine textContent kullanmak, kötü niyetli scriptlerin çalışmasını engeller. Üretim ortamında her zaman kullanıcı girdilerini temizleyin (sanitize).

Sıkça Sorulan Sorular

LocalStorage ne kadar veri saklayabilir?

Modern tarayıcılarda LocalStorage genellikle alan başına 5MB ile 10MB arasında bir depolama kapasitesi sunar. Bu, bir To-Do listesi için fazlasıyla yeterlidir.

Veriler tarayıcıyı kapatsam da silinir mi?

Hayır, LocalStorage'daki veriler siz tarayıcı geçmişini temizlemediğiniz veya kodunuzla localStorage.clear() komutunu çalıştırmadığınız sürece kalıcıdır.

LocalStorage'da şifre saklamalı mıyım?

Kesinlikle hayır. LocalStorage tarayıcıda herkes tarafından erişilebilir durumdadır. Hassas veriler (şifre, kredi kartı bilgisi) asla burada tutulmamalıdır.

Birden fazla sekmede senkronizasyon nasıl sağlanır?

window.addEventListener('storage', ...) olayını dinleyerek, bir sekmede yapılan değişikliğin diğer sekmelere anlık yansımasını sağlayabilirsiniz.

JSON.stringify kullanmak zorunda mıyım?

Evet, çünkü LocalStorage sadece metin verilerini kabul eder. Nesneleri metne dönüştürmek için bu yöntem standarttır.

Uygulama Performansını Optimize Etme ve Hata Ayıklama

To-Do List uygulamanız büyüdükçe, her veri değişikliğinde tüm listeyi localStorage üzerinden okumak ve DOM'u tamamen yeniden oluşturmak performans sorunlarına yol açabilir. Özellikle yüzlerce görevin olduğu durumlarda, "Virtual DOM" mantığına benzer şekilde sadece değişen öğeyi güncellemek daha verimlidir.

Performansı artırmak için şu stratejileri uygulayabilirsiniz:

• Event Delegation (Olay Yetkilendirme): Her bir liste öğesine ayrı bir "tıklama" dinleyicisi eklemek yerine, ana kapsayıcıya (ul etiketi) tek bir dinleyici ekleyerek event.target üzerinden işlem yapın.
• Debouncing: Eğer kullanıcı hızlıca görev durumlarını değiştiriyorsa, localStorage yazma işlemini küçük bir gecikme ile (örneğin 300ms) tetikleyerek tarayıcıyı yormayın.

// Event Delegation örneği
document.getElementById('todo-list').addEventListener('click', function(e) {
    if (e.target.classList.contains('delete-btn')) {
        const id = e.target.parentElement.dataset.id;
        removeTask(id);
    }
});

Hata ayıklama (debugging) sürecinde ise tarayıcının geliştirici araçlarını (F12) aktif kullanın. Application sekmesindeki Storage bölümü, verilerin anlık durumunu izlemek için en iyi dostunuzdur. Eğer verileriniz beklenmedik şekilde siliniyorsa, localStorage.clear() komutunun kodunuzun neresinde çağrıldığını kontrol edin.

İleri Seviye İpuçları: Veri Yapısını Ölçeklendirme

Basit bir dizi yapısı yerine, verilerinizi daha yönetilebilir bir nesne yapısında tutmak, uygulamanıza "kategori" veya "öncelik seviyesi" gibi özellikler eklemenizi kolaylaştırır. Aşağıdaki örnek, görevlerinizi bir nesne içerisinde nasıl düzenleyebileceğinizi gösterir:

// Daha ölçeklenebilir bir veri yapısı
const todoData = {
    tasks: [
        { id: 1, text: "Proje raporunu hazırla", priority: "high", completed: false },
        { id: 2, text: "E-postaları yanıtla", priority: "low", completed: true }
    ],
    lastUpdated: Date.now()
};

// Veriyi kaydederken
localStorage.setItem('todo_app_data', JSON.stringify(todoData));

// Veriyi çekerken
const savedData = JSON.parse(localStorage.getItem('todo_app_data'));
console.log("Son güncelleme:", new Date(savedData.lastUpdated).toLocaleString());

Bu yapı sayesinde, uygulamanıza filtreleme (sadece yüksek öncelikli görevleri göster) veya sıralama (tarihe göre sırala) gibi gelişmiş fonksiyonları çok daha az kod yazarak entegre edebilirsiniz. Unutmayın, verinin yapısı ne kadar düzenli olursa, uygulamanızın bakım maliyeti o kadar düşük olur.

Sonuç

JavaScript ile LocalStorage kullanarak bir To-Do List yapmak, web geliştirme temellerini anlamak için harika bir adımdır. Bu projede öğrendiğiniz veri saklama, DOM manipülasyonu ve JSON işlemleri, daha karmaşık uygulamalar geliştirirken temel taşınız olacaktır.

Bir sonraki adım olarak, bu projeye "görevleri sürükle-bırak" özelliği ekleyebilir veya CSS ile "karanlık mod" (dark mode) desteği getirebilirsiniz. Kodunuzu her zaman temiz tutun ve güvenlik açıklarına karşı her zaman tetikte olun.

Sorumluluk Reddi: Bu makalede paylaşılan kodlar eğitim amaçlıdır. Uygulamanızı canlıya alırken XSS ve veri güvenliği önlemlerini aldığınızdan, kullanıcı girdilerini filtrelediğinizden emin olun. Yazılım güvenliği sorumluluğu geliştiriciye aittir.