React İle Local Storage Kullanarak Veri Kalıcılığı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu rehberdeki kod örneklerini uygulayabilmek için bilgisayarınızda güncel bir Node.js sürümü ve temel düzeyde React bilgisi gereklidir. Projenizi oluşturmak için en güncel yöntem olan Vite kullanmanızı öneririz.

• Node.js (LTS sürümü)
• React 18 veya üzeri
• Modern bir kod editörü (VS Code gibi)
• Tarayıcı geliştirici araçları (Chrome DevTools)

Projenizi başlatmak için terminalinizde npm create vite@latest my-storage-app -- --template react komutunu çalıştırarak gerekli kurulumları yapabilirsiniz.

Local Storage Nedir ve Neden Kullanılır?

Local Storage, tarayıcıda anahtar-değer (key-value) çiftleri halinde veri saklamanıza olanak tanıyan bir Web API'sidir. Çerezlerden (cookies) farklı olarak, sunucuya her istekte gönderilmez ve çok daha büyük veri kapasitesine (genellikle 5-10 MB) sahiptir. React uygulamalarında, sayfa yenilendiğinde kaybolan state verilerini kurtarmak için ideal bir çözümdür.

Adım Adım React State ve Local Storage Senkronizasyonu

Veriyi Local Storage'a yazmak için localStorage.setItem(), okumak için ise localStorage.getItem() metodlarını kullanırız. React'te bu işlemi useEffect hook'u ile birleştirerek, state her değiştiğinde depolamayı güncellemek en verimli yöntemdir.

import { useState, useEffect } from 'react';

function App() {
  const [name, setName] = useState(() => {
    return localStorage.getItem('userName') || '';
  });

  useEffect(() => {
    localStorage.setItem('userName', name);
  }, [name]);

  return (
     setName(e.target.value)} 
      placeholder="Adınızı girin" 
    />
  );
}

Yukarıdaki örnekte, useState içerisine bir fonksiyon geçerek "lazy initialization" (tembel başlatma) yaptık. Bu, bileşen ilk yüklendiğinde Local Storage'dan veriyi sadece bir kez okumamızı sağlar.

Özel Bir Hook Yazarak Kod Tekrarını Önleme

Uygulamanızın birçok yerinde Local Storage kullanacaksanız, bu mantığı özelleştirilmiş bir hook (custom hook) içerisine almak en iyi pratiklerden biridir. Bu sayede hem kodunuz daha temiz olur hem de hata yönetimi kolaylaşır.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });

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

  return [value, setValue];
}

Bu hook, veriyi otomatik olarak JSON formatına dönüştürür ve geri okurken parse eder. Böylece sadece string değil, obje veya dizi gibi karmaşık verileri de saklayabilirsiniz.

Güvenlik ve Hata Yönetimi

Local Storage'a veri yazarken dikkat etmeniz gereken en önemli husus, kullanıcı tarafından manipüle edilebileceği gerçeğidir. Hassas verileri (şifre, token vb.) asla burada saklamamalısınız. Ayrıca, JSON.parse() işlemi bozuk veri geldiğinde uygulamanın çökmesine neden olabilir.

Kritik Uyarı: Local Storage, XSS (Cross-Site Scripting) saldırılarına karşı savunmasızdır. Kullanıcı verilerini saklarken asla doğrudan DOM'a yazdırmayın ve her zaman verinin doğruluğunu kontrol edin. Üretim ortamında hassas veriler için HttpOnly çerezlerini tercih edin.

const [data, setData] = useState(() => {
  try {
    const item = localStorage.getItem('myKey');
    return item ? JSON.parse(item) : [];
  } catch (error) {
    console.error("Veri okuma hatası:", error);
    return [];
  }
});

Bu yöntem, depolanan veri bozulduğunda uygulamanın durmasını engeller ve varsayılan bir değer döndürerek güvenli bir geri dönüş sağlar.

Gelişmiş Kullanım: Obje ve Dizi Saklama

Basit string değerlerin ötesine geçerek, bir alışveriş sepeti veya kullanıcı ayarları gibi karmaşık yapıları nasıl saklayacağımıza bakalım. JSON.stringify ve JSON.parse ikilisi burada anahtar rol oynar.

const [settings, setSettings] = useState({ theme: 'dark', notifications: true });

// Ayarları güncellemek için
const toggleTheme = () => {
  setSettings(prev => ({ ...prev, theme: prev.theme === 'dark' ? 'light' : 'dark' }));
};

// useEffect ile senkronizasyon yukarıdaki hook yapısıyla aynı şekilde çalışır.

Bu yaklaşım, state yapınız karmaşıklaştıkça verinin tutarlılığını korumanıza yardımcı olur. Özellikle büyük objelerde, sadece değişen kısmı güncellemek performans açısından önemlidir.

Sıkça Sorulan Sorular

Local Storage verileri ne zaman silinir?

Local Storage verileri, kullanıcı tarayıcı geçmişini temizleyene veya siz kod içerisinde localStorage.removeItem() ya da localStorage.clear() metodlarını kullanana kadar silinmez.

React'te Local Storage kullanırken performans sorunu yaşar mıyım?

Local Storage senkron bir işlemdir. Çok büyük verileri sürekli yazmak ana iş parçacığını (main thread) kilitleyebilir. Çok büyük veriler için IndexedDB gibi asenkron çözümleri değerlendirmelisiniz.

Birden fazla sekmede aynı veriyi nasıl güncel tutarım?

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

Local Storage'a hangi tür veriler kaydedilmemeli?

Kullanıcı şifreleri, kredi kartı bilgileri, JWT (JSON Web Token) gibi güvenlik riski taşıyan veya sunucu tarafında doğrulanması gereken hiçbir veri Local Storage'da tutulmamalıdır.

Mobil tarayıcılarda Local Storage farklı çalışır mı?

Temel çalışma mantığı aynıdır ancak bazı özel gizlilik modlarında (örneğin Safari'nin gizli sekmesi) Local Storage erişimi kısıtlı olabilir veya veri kalıcı olmayabilir.

React Uygulamalarında Local Storage Verilerini Test Etme ve Hata Ayıklama

Local Storage ile çalışırken, verilerin tarayıcıda nasıl saklandığını ve uygulamanızın bu verilere nasıl tepki verdiğini doğrulamak kritik bir süreçtir. Geliştirme aşamasında tarayıcı araçlarını (Chrome DevTools) kullanmak en temel yöntem olsa da, test süreçlerini otomatize etmek uygulamanızın kararlılığını artırır.

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

Chrome veya Firefox'ta Application (Uygulama) sekmesine giderek Local Storage bölümünü inceleyebilirsiniz. Burada anahtar-değer çiftlerini görebilir, manuel olarak silebilir veya verileri düzenleyerek uygulamanızın "bozuk" veri karşısında nasıl davrandığını (hata yönetimi) test edebilirsiniz.

Jest ve React Testing Library ile Birim Testi

Local Storage, tarayıcıya özgü bir API olduğu için Node.js ortamında (Jest) doğrudan çalışmaz. Bu nedenle test ortamınızda localStorage nesnesini taklit etmeniz (mocking) gerekir.

// localStorage.test.js
const localStorageMock = (function () {
  let store = {};
  return {
    getItem: (key) => store[key] || null,
    setItem: (key, value) => { store[key] = value.toString(); },
    clear: () => { store = {}; }
  };
})();

Object.defineProperty(window, 'localStorage', { value: localStorageMock });

test('verinin localStorage\'a kaydedildiğini doğrula', () => {
  localStorage.setItem('testKey', 'testValue');
  expect(localStorage.getItem('testKey')).toBe('testValue');
});

Alternatif: Veri Yönetimi İçin Kütüphane Kullanımı

Local Storage'ın ham API'si ile çalışmak, özellikle karmaşık veri yapıları ve tip güvenliği (TypeScript) söz konusu olduğunda hata payını artırır. usehooks-ts veya localforage gibi kütüphaneler, bu süreci daha yönetilebilir kılar.

LocalForage ile Asenkron Veri Yönetimi

Local Storage senkron çalışır ve büyük veri setlerinde ana iş parçacığını (main thread) kilitleyebilir. localforage, IndexedDB tabanlı bir yapı sunarak verileri asenkron olarak saklar ve daha yüksek performans sağlar.

import localforage from 'localforage';

// Veri kaydetme
const saveData = async (key, value) => {
  try {
    await localforage.setItem(key, value);
    console.log('Veri başarıyla kaydedildi.');
  } catch (err) {
    console.error('Kayıt sırasında hata oluştu:', err);
  }
};

// Veri okuma
const getData = async (key) => {
  const value = await localforage.getItem(key);
  return value;
};

Bu yaklaşım, özellikle büyük JSON objeleriyle çalışırken uygulamanızın donmasını engeller ve daha modern bir API deneyimi sunar. Küçük ölçekli projelerde localStorage yeterli olsa da, veri yoğunluklu uygulamalarda bu tür kütüphanelere geçiş yapmak profesyonel bir standarttır.

Sonuç

React uygulamalarında Local Storage kullanımı, kullanıcı deneyimini kişiselleştirmek ve uygulamanın kaldığı yerden devam etmesini sağlamak için oldukça güçlü bir araçtır. Bu rehberde, basit bir state yönetiminden başlayarak güvenli ve ölçeklenebilir bir yapı kurmayı öğrendiniz. Bir sonraki adım olarak, verilerinizi daha güvenli yönetmek için IndexedDB kütüphanelerini veya sunucu taraflı senkronizasyon yöntemlerini araştırmanızı öneririm.

Yasal Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Uygulamanızın güvenliğinden geliştirici olarak siz sorumlusunuz. Kullanıcı verilerinin korunması ve KVKK/GDPR uyumluluğu konusunda yerel yasalara uymak sizin yükümlülüğünüzdedir.