React İle Localstorage Kullanarak Dinamik Alışveriş Sepeti Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Uygulamamıza başlamadan önce bilgisayarınızda Node.js ve bir paket yöneticisinin (npm veya yarn) yüklü olduğundan emin olmalısınız. React 19 ve üzeri sürümlerle uyumlu, modern bir yapı kuracağız.

• Node.js (LTS sürümü önerilir).
• React projesi oluşturmak için Vite kullanacağız (hızlı ve güncel olduğu için).
• Kod editörü olarak Visual Studio Code.

Terminalinize aşağıdaki komutu yazarak projenizi başlatabilirsiniz:

npm create vite@latest alisveris-sepeti -- --template react
cd alisveris-sepeti
npm install
npm run dev

Bu komutlar, projenizin temel iskeletini oluşturur ve yerel bir geliştirme sunucusu başlatır. Artık kodlamaya başlamaya hazırsınız.

React State Yapısı ve Sepet Mantığı

Alışveriş sepeti, ürünlerin bir dizide (array) tutulduğu bir state yapısına ihtiyaç duyar. Sepet verisini yönetirken, ürünün ID'si, ismi, fiyatı ve adedi gibi bilgileri nesne olarak tutacağız. İlk adım olarak sepet state'ini tanımlayalım.

import { useState } from 'react';

const [sepet, setSepet] = useState([]);

const sepeteEkle = (urun) => {
  setSepet([...sepet, urun]);
};

Burada useState kullanarak sepetin başlangıç durumunu boş bir dizi olarak belirledik. sepeteEkle fonksiyonu ise mevcut sepeti koruyarak yeni ürünü diziye ekler. Ancak bu yöntem, aynı üründen birden fazla eklenmesini engellemez; bunu bir sonraki adımda geliştireceğiz.

Localstorage Kullanarak Veri Kalıcılığı Sağlama

Localstorage, tarayıcıda anahtar-değer (key-value) çiftleri şeklinde veri saklamamıza olanak tanır. React'te bir state değiştiğinde bunu Localstorage'a yansıtmak için useEffect kancasını kullanırız. Bu, uygulamanızın her render işleminden sonra verinin güncel kalmasını sağlar.

import { useEffect } from 'react';

useEffect(() => {
  const kaydedilenSepet = JSON.parse(localStorage.getItem('sepet'));
  if (kaydedilenSepet) {
    setSepet(kaydedilenSepet);
  }
}, []);

useEffect(() => {
  localStorage.setItem('sepet', JSON.stringify(sepet));
}, [sepet]);

İlk useEffect, uygulama ilk yüklendiğinde Localstorage'dan veriyi çeker. İkinci useEffect ise sepet dizisi her değiştiğinde, güncel veriyi otomatik olarak tarayıcıya kaydeder.

Dinamik Ürün Ekleme ve Adet Yönetimi

Gerçek bir alışveriş sepetinde aynı üründen eklediğinizde, yeni bir satır oluşturmak yerine mevcut ürünün adedini (quantity) artırmanız gerekir. Bu, kullanıcı deneyimi açısından kritiktir.

const sepeteEkle = (urun) => {
  setSepet((prevSepet) => {
    const varMi = prevSepet.find((item) => item.id === urun.id);
    if (varMi) {
      return prevSepet.map((item) =>
        item.id === urun.id ? { ...item, adet: item.adet + 1 } : item
      );
    }
    return [...prevSepet, { ...urun, adet: 1 }];
  });
};

Bu fonksiyon, ürünün sepette olup olmadığını kontrol eder. Eğer ürün varsa map metodu ile adedini günceller, yoksa yeni bir ürün olarak listeye ekler.

Sepetten Ürün Çıkarma ve Arayüz Güncelleme

Kullanıcıların sepetten ürün çıkarmasını sağlamak için filter metodunu kullanırız. Bu işlem, seçilen ID dışındaki tüm ürünleri yeni bir dizide toplar.

const sepettenCikar = (id) => {
  setSepet((prevSepet) => prevSepet.filter((item) => item.id !== id));
};

Bu fonksiyon, bir buton yardımıyla tetiklendiğinde sepet state'ini günceller ve useEffect tetiklenerek Localstorage'daki veriyi de otomatik olarak günceller.

Veri Depolama Yöntemlerinin Karşılaştırılması

Kritik Güvenlik Uyarısı: Localstorage, XSS (Cross-Site Scripting) saldırılarına karşı savunmasızdır. Kullanıcıların hassas bilgilerini (kredi kartı, şifre vb.) kesinlikle Localstorage içerisinde saklamayın. Sadece sepet içeriği gibi genel veriler için kullanın.

Sıkça Sorulan Sorular

Localstorage verileri neden silinir?

Localstorage verileri tarayıcı önbelleği temizlendiğinde veya kullanıcı gizli sekme (incognito) modunda işlem yapıp sekmeyi kapattığında silinebilir. Bu yüzden kritik veriler için mutlaka veritabanı desteği almalısınız.

React'te Localstorage kullanırken neden JSON.stringify kullanıyoruz?

Localstorage yalnızca metin (string) verileri saklayabilir. JavaScript nesnelerini ve dizilerini saklamak için onları JSON formatına dönüştürmemiz gerekir.

Aynı anda birden fazla sekmede sepet nasıl senkronize edilir?

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

Sepet verisi çok büyük olursa ne olur?

Localstorage kapasitesi sınırlıdır (genellikle 5MB). Çok fazla ürün veya karmaşık veri yapısı tutacaksanız IndexedDB gibi daha gelişmiş çözümlere yönelmelisiniz.

Performans kaybı yaşar mıyım?

Küçük ölçekli sepet işlemleri için Localstorage oldukça hızlıdır. Ancak her render işleminde ağır veri yazma işlemleri yapmamaya dikkat edin.

Sepet Verilerini Debug Etme ve Hata Ayıklama İpuçları

Geliştirme sürecinde Localstorage ile çalışırken en sık karşılaşılan sorunlar, verinin bozulması (corruption) veya JSON formatındaki hatalı yazımlardır. Uygulamanızın kararlı çalışması için tarayıcı geliştirici araçlarını etkin kullanmanız gerekir.

Tarayıcı Geliştirici Araçları ile İzleme

Chrome veya Firefox'ta Application (Uygulama) sekmesine giderek Local Storage bölümünü inceleyebilirsiniz. Burada sepet verinizin güncel halini anlık olarak görebilirsiniz. Eğer sepetiniz beklenmedik şekilde boşalıyorsa, şu adımları izleyerek hata ayıklama yapın:

• JSON Parse Hataları: Veriyi okurken try-catch bloğu kullanmadığınızda, bozuk bir JSON string'i uygulamanızın çökmesine neden olabilir.
• Anahtar Çakışmaları: Tarayıcıda aynı domain üzerinde çalışan farklı uygulamalar varsa, localStorage.getItem('cart') çağrısı başka bir uygulamanın verisini çekebilir. Anahtarlarınızı myapp_cart_v1 gibi özelleştirin.

// Güvenli veri okuma örneği
const getCartData = () => {
  try {
    const savedCart = localStorage.getItem('my_app_cart');
    return savedCart ? JSON.parse(savedCart) : [];
  } catch (error) {
    console.error("Sepet verisi okunurken hata oluştu:", error);
    return []; // Hata durumunda boş sepet dönerek uygulamanın devamlılığını sağla
  }
};

Sepet Performansını Optimize Etme

Localstorage senkron bir API'dir; bu da büyük verilerle çalışırken ana thread'i (ana iş parçacığı) bloklayabileceği anlamına gelir. Sepetinizde sadece ürün ID'leri ve adet bilgilerini tutmak, performans açısından en doğru yaklaşımdır.

Veri Boyutunu Küçültme Stratejileri

Sepet nesnesinde ürünün tüm detaylarını (açıklama, uzun görsel URL'leri, teknik özellikler) saklamak yerine, sadece gerekli minimum bilgiyi tutun ve ürün detaylarını uygulama açılışında API üzerinden çekin.

Eğer sepetinizde yüzlerce ürün bulunuyorsa, her bir dispatch işleminde Localstorage'a yazmak yerine, useEffect kullanarak veriyi debounce (gecikmeli yazma) yöntemiyle kaydetmek performansı ciddi oranda artıracaktır.

import { useState, useEffect } from 'react';

// Debounce mantığı ile 500ms gecikmeli kayıt
useEffect(() => {
  const handler = setTimeout(() => {
    localStorage.setItem('cart', JSON.stringify(cartItems));
  }, 500);

  return () => clearTimeout(handler);
}, [cartItems]);

İpucu: Kullanıcı sepeti kapattığında veya sayfadan ayrıldığında veriyi anlık kaydetmek için window.onbeforeunload olayını dinleyerek son bir senkronizasyon yapabilirsiniz.

Sonuç

React ile Localstorage kullanarak dinamik bir alışveriş sepeti oluşturmak, state yönetimi ve tarayıcı depolama birimlerini birleştiren temel bir yetkinliktir. Bu rehberde öğrendiğiniz yöntemleri kullanarak, kullanıcılarınızın sepetlerini sayfayı yenileseler bile kaybetmemelerini sağladınız. Bir sonraki adım olarak, bu sepet verisini bir API üzerinden sunucuya gönderen "Ödeme İşlemleri" (Checkout) modülünü geliştirmeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanacağınız uygulamalarda veri doğrulaması, hata yönetimi ve güvenlik katmanlarını (Input Sanitization vb.) mutlaka uygulayın.