JavaScript localStorage Kullanımı: Veri Ekleme, Silme ve Güncelleme Rehberi

Web uygulamalarının kullanıcı deneyimini iyileştirmek için en sık kullanılan yöntemlerden biri JavaScript localStorage, kullanıcıya ait verileri tarayıcıda saklamaktır. Bu işlem sayesinde kullanıcı verileri sunucuya ihtiyaç duyulmadan yerel olarak depolanabilir ve sonraki ziyaretlerde kullanıcı deneyimi kişiselleştirilebilir. JavaScript ile bu işlemi yapmanın en pratik yollarından biri localStorage kullanmaktır. Bu yazıda, JavaScript ile localStorage kullanımı, veri ekleme, silme ve güncelleme işlemlerini detaylı ve örneklerle açıklayacağız. Ayrıca gerçek hayattan örnekler ve best practice’lerle konuyu derinlemesine ele alacağız.

localStorage Nedir?

localStorage, HTML5 ile birlikte gelen bir web API’sidir ve kullanıcı tarayıcısında kalıcı veri saklamak için kullanılır. Diğer bir deyişle, kullanıcı tarayıcısını kapatsa bile veriler silinmez. localStorage, anahtar-değer (key-value) çifti yapısıyla çalışır ve yalnızca string (metin) veri saklayabilir. Ancak JSON formatı ile nesne ve diziler de kolayca depolanabilir.

Avantajları:

• Kolay ve hızlıdır.
• Tarayıcı kapansa bile veri kalıcıdır.
• Oturumdan bağımsız çalışır.
• Kullanıcı bazlı veri saklamada idealdir.

Kısıtlamaları:

• Maksimum kapasite genellikle 5MB civarındadır (tarayıcıya göre değişebilir).
• Sadece string veri saklar. (Ancak JSON.stringify() ve JSON.parse() ile bu kısıt aşılabilir.)
• Güvenli değildir. Kullanıcı veya kötü amaçlı yazılımlar verileri okuyabilir.

JavaScript localStorage Nasıl Kullanılır?

localStorage API’si dört temel yöntem içerir:

// Veri eklemek veya güncellemek için:
localStorage.setItem('anahtar', 'deger');

// Veriyi almak için:
const veri = localStorage.getItem('anahtar');

// Belirli bir anahtarı silmek için:
localStorage.removeItem('anahtar');

// Tüm localStorage verilerini temizlemek için:
localStorage.clear();

Bu basit metodlar sayesinde veri eklemek, okumak veya silmek oldukça kolay hale gelir.

Örnek 1: Basit Metin Verisi Ekleme ve Okuma

<input type="text" id="kullaniciAdi" placeholder="Adınızı girin">
<button onclick="veriyiKaydet()">Kaydet</button>
<button onclick="veriyiGoster()">Göster</button>

<script>
function veriyiKaydet() {
  const ad = document.getElementById('kullaniciAdi').value;
  localStorage.setItem('ad', ad);
}

function veriyiGoster() {
  const kayitliAd = localStorage.getItem('ad');
  alert('Kayıtlı ad: ' + kayitliAd);
}
</script>

Bu örnekte kullanıcı bir isim girer ve “Kaydet” butonuna bastığında veri localStorage’a kaydedilir. “Göster” butonuna tıklanınca saklanan veri kullanıcıya bildirim olarak gösterilir.

Örnek 2: JSON Veri Yapısı ile Liste Saklamak

localStorage sadece string veri saklayabildiği için dizi ve nesne gibi veri yapıları JSON.stringify() ile string’e çevrilerek saklanır. Geri çağırırken ise JSON.parse() kullanılır.

function listeyeEkle(yeniGorev) {
  let liste = JSON.parse(localStorage.getItem('gorevler')) || [];
  liste.push(yeniGorev);
  localStorage.setItem('gorevler', JSON.stringify(liste));
}

function listeyiGoster() {
  let liste = JSON.parse(localStorage.getItem('gorevler')) || [];
  liste.forEach((gorev, index) => {
    console.log(index + 1 + '. Görev: ' + gorev);
  });
}

listeyeEkle("Kod yaz");
listeyeEkle("Blog hazırla");
listeyiGoster();

Bu örnek sayesinde bir görev listesi tarayıcı belleğinde kalıcı olarak saklanabilir. Kullanıcı sayfayı kapatsa bile görev listesi kaybolmaz.

localStorage’dan Veri Silme

Verileri silmek için iki temel yöntem vardır:

Belirli bir anahtarı silmek:

localStorage.removeItem('ad');

Tüm localStorage verilerini silmek:

localStorage.clear();

Bu işlemlerle tarayıcı belleği kolayca kontrol altında tutulabilir.

Örnek 3: Listeden Eleman Silmek

function gorevSil(index) {
  let liste = JSON.parse(localStorage.getItem('gorevler')) || [];
  liste.splice(index, 1);
  localStorage.setItem('gorevler', JSON.stringify(liste));
}

Bu fonksiyon, belirtilen index’e sahip görevi görev listesinden siler ve localStorage’ı günceller. Dinamik uygulamalarda oldukça işe yarar.

Uygulama: Dinamik ve Kalıcı Bir Görev Listesi

<input type="text" id="gorevInput">
<button onclick="gorevEkle()">Ekle</button>
<ul id="gorevListesi"></ul>

<script>
function gorevEkle() {
  let gorev = document.getElementById('gorevInput').value;
  if (!gorev.trim()) return;
  let liste = JSON.parse(localStorage.getItem('gorevler')) || [];
  liste.push(gorev);
  localStorage.setItem('gorevler', JSON.stringify(liste));
  listeyiYazdir();
}

function listeyiYazdir() {
  let liste = JSON.parse(localStorage.getItem('gorevler')) || [];
  const ul = document.getElementById('gorevListesi');
  ul.innerHTML = '';
  liste.forEach((gorev, index) => {
    ul.innerHTML += `<li>${gorev} <button onclick="gorevSil(${index})">Sil</button></li>`;
  });
}

function gorevSil(index) {
  let liste = JSON.parse(localStorage.getItem('gorevler')) || [];
  liste.splice(index, 1);
  localStorage.setItem('gorevler', JSON.stringify(liste));
  listeyiYazdir();
}

window.onload = listeyiYazdir;
</script>

Bu uygulama, localStorage kullanarak bir görev listesi oluşturur. Kullanıcı yeni görev ekleyebilir, mevcut görevleri görüntüleyebilir ve silebilir. Sayfa yenilense bile veriler kaybolmaz.

localStorage Kullanırken Dikkat Edilmesi Gerekenler

• Veri Güvenliği: localStorage şifreli değildir. Hassas bilgileri (şifre, token) burada tutmak önerilmez.
• Veri Boyutu: 5MB limiti nedeniyle büyük veriler için uygun değildir.
• Tarayıcı Uyumluluğu: Modern tarayıcıların neredeyse tamamı destekler. Ancak Internet Explorer gibi eski tarayıcılarda test yapılmalıdır.
• Cross-Site Veri Paylaşımı: localStorage verileri sadece aynı domain ve port üzerinde kullanılabilir. Alt domainlerde veri paylaşımı mümkün değildir.

Sonuç

JavaScript localStorage kullanımı, özellikle küçük ve orta ölçekli projelerde kullanıcı verilerini hızlı ve kolay bir şekilde saklamak için ideal bir yöntemdir. Veri eklemek, silmek ve güncellemek gibi işlemler oldukça basit olup JSON ile birlikte kullanıldığında çok daha esnek hale gelir. Form verisi saklama, alışveriş sepeti oluşturma, tema ayarları tutma, görev listeleri veya oyun verileri gibi pek çok senaryoda kullanılabilir.

Uygulamalarınızda kullanıcı deneyimini iyileştirmek ve verileri yönetmek istiyorsanız, JavaScript localStorage mutlaka öğrenmeniz gereken bir web API’sidir. Daha fazlası için “Javascript” kategorisine bakabilirsin.

Kaynak w3schools