Emre

Emre

WFN Üye
Konular
1,647
Mesajlar
1,743
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 3 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
Kullanıcı tercihini localStorage içine kaydetmek için değeri anahtar-değer biçiminde setItem() ile yazın, sayfa açıldığında getItem() ile okuyun ve kullanıcı tercih yapmadıysa varsayılan değeri kullanın. Örneğin tema seçimini kaydeden kodda kullanıcı açık veya koyu temayı seçtiğinde tercih tarayıcıya yazılır; sayfa yenilendiğinde aynı değer okunarak tema yeniden uygulanır.

Temel kullanım sırası​


localStorage, tarayıcının aynı kaynakta çalışan sayfalar için sakladığı metin tabanlı veridir. Veriler anahtar ve değer çiftleriyle tutulur. Değerler doğrudan nesne, dizi veya sayı olarak değil, metin olarak kaydedildiği için karmaşık verilerde JSON.stringify() ve JSON.parse() kullanılır.

Bir kullanıcı tercihini kaydetmek için şu sırayı izleyin:
  1. Tercihe ait bir anahtar adı belirleyin.
  2. Kullanıcının seçimini localStorage.setItem() ile kaydedin.
  3. Sayfa açıldığında değeri localStorage.getItem() ile okuyun.
  4. Kayıt yoksa varsayılan tercihi kullanın.
  5. Okunan değere göre arayüzü güncelleyin.
Örneğin aşağıdaki kod, bir düğmeye basıldığında seçilen temayı kaydeder ve sayfa her açıldığında daha önce kaydedilmiş temayı uygular:

JavaScript: 
const temaAnahtari = 'siteTemasi';
const varsayilanTema = 'acik';

function temayiUygula(tema) {
  document.documentElement.dataset.tema = tema;
}

function kaydedilmisTemayiYukle() {
  const kayitliTema = localStorage.getItem(temaAnahtari);
  const tema = kayitliTema ?? varsayilanTema;

  temayiUygula(tema);
}

document.querySelector('#acikTema').addEventListener('click', () => {
  localStorage.setItem(temaAnahtari, 'acik');
  temayiUygula('acik');
});

document.querySelector('#koyuTema').addEventListener('click', () => {
  localStorage.setItem(temaAnahtari, 'koyu');
  temayiUygula('koyu');
});

kaydedilmisTemayiYukle();

Bu örnekte HTML içinde acikTema ve koyuTema kimliklerine sahip düğmeler bulunmalıdır. Kullanıcı açık tema düğmesine bastığında siteTemasi anahtarıyla acik değeri, koyu tema düğmesine bastığında ise koyu değeri kaydedilir. Sayfa yenilendiğinde kaydedilmisTemayiYukle() çalışır; kayıt varsa bu değer, kayıt yoksa acik değeri kullanılır.

Örneğin HTML tarafı şöyle olabilir:

HTML: 
<button id="acikTema" type="button">Açık tema</button>
<button id="koyuTema" type="button">Koyu tema</button>

Kodun çalışması için JavaScript’in bu düğmeler oluşturulduktan sonra çalışması gerekir. JavaScript dosyası body kapanışından önce yüklenebilir veya kod, DOM öğeleri hazır olduktan sonra çalıştırılabilir. Aksi durumda querySelector() düğmeyi bulamaz ve addEventListener() çağrısı hata verebilir.

Kaydedilen tercihi okumak ve silmek​


Bir kaydı okumak için anahtarı getItem() metoduna verin:

JavaScript: 
const tema = localStorage.getItem('siteTemasi');
console.log(tema);

Kayıt varsa sonuç, örneğin 'koyu' metnidir. Kayıt yoksa sonuç null olur. null gelmesi, kullanıcının tercihi olmadığı anlamına gelir; ancak kullanıcının özellikle varsayılan değeri seçtiğini kanıtlamaz. Bu ayrım önemliyse varsayılan değeri de ayrıca kaydedebilirsiniz.

Bir tercihi kaldırmak için anahtarı removeItem() ile silin:

JavaScript: 
localStorage.removeItem('siteTemasi');

Bu işlem yalnızca siteTemasi kaydını kaldırır. Kullanıcı daha sonra sayfayı açtığında uygulama kayıt bulamaz ve kodda belirlediğiniz varsayılan tercihe döner. Tüm localStorage kayıtlarını silmek için clear() kullanılabilir; fakat bu yöntem aynı kaynakta saklanan başka uygulama verilerini de kaldırabileceği için kullanıcıya açık bir “tüm ayarları sıfırla” işlemi dışında dikkatli kullanılmalıdır.

Dizi veya nesne nasıl kaydedilir?​


Kullanıcı tercihi birden fazla alan içeriyorsa nesneyi kaydetmeden önce metne dönüştürün. Örneğin dil, yazı boyutu ve bildirim tercihini birlikte saklamak için:

JavaScript: 
const kullaniciTercihi = {
  dil: 'tr',
  yaziBoyutu: 'buyuk',
  bildirimlerAcik: true
};

localStorage.setItem(
  'kullaniciTercihi',
  JSON.stringify(kullaniciTercihi)
);

const kayitliMetin = localStorage.getItem('kullaniciTercihi');
const tercih = kayitliMetin
  ? JSON.parse(kayitliMetin)
  : {
      dil: 'tr',
      yaziBoyutu: 'normal',
      bildirimlerAcik: false
    };

console.log(tercih.dil);
console.log(tercih.bildirimlerAcik);

Burada JSON.stringify() nesneyi saklanabilir metne çevirir, JSON.parse() ise okunan metni yeniden JavaScript nesnesine dönüştürür. Kayıt bozuksa veya başka bir sürümde farklı biçimde yazılmışsa JSON.parse() hata verebilir. Kullanıcı verisiyle çalışan kodda dönüşümü try...catch ile korumak ve geçersiz kaydı silip varsayılan değerlere dönmek daha güvenlidir.

JavaScript: 
const varsayilanTercih = {
  dil: 'tr',
  yaziBoyutu: 'normal',
  bildirimlerAcik: false
};

function tercihiYukle() {
  const kayitliMetin = localStorage.getItem('kullaniciTercihi');

  if (!kayitliMetin) {
    return varsayilanTercih;
  }

  try {
    const kayitliTercih = JSON.parse(kayitliMetin);

    return {
      ...varsayilanTercih,
      ...kayitliTercih
    };
  } catch {
    localStorage.removeItem('kullaniciTercihi');
    return varsayilanTercih;
  }
}

const tercih = tercihiYukle();
console.log(tercih);

Bu yaklaşımda kaydın bazı alanları eksik olsa bile eksik alanlar varsayılan değerlerden tamamlanır. Geçersiz JSON bulunursa kayıt yok sayılır ve temizlenir. Böylece tek bir bozuk kayıt yüzünden sayfanın geri kalanının çalışmaması önlenir.

localStorage hangi durumda kullanılmalı?​


localStorage, aynı tarayıcı ve aynı kaynak için sayfa yenilense veya tarayıcı kapatılıp yeniden açılsa da korunması istenen küçük tercihler için uygundur. Tema, dil seçimi, liste görünümü, kenar çubuğunun açık-kapalı durumu veya kullanıcının yerel olarak belirlediği sıralama biçimi buna örnek olabilir.

Aşağıdaki ayrım, hangi saklama yönteminin uygun olduğunu belirlemeye yardımcı olur.
YöntemVeri ne zaman kullanılır?Önemli sınır
localStorageTarayıcıda kalıcı olması istenen küçük kullanıcı tercihleriDeğerler metindir; hassas veriler için uygun değildir
sessionStorageYalnızca geçerli sekme veya oturum boyunca gerekli geçici tercihlerSekme kapandığında veri korunmayabilir
ÇerezSunucuya da gönderilmesi gereken küçük verilerİsteklerle birlikte gönderildiği için kullanım amacı farklıdır
localStorage ile kaydedilen değer sunucuya otomatik olarak gönderilmez. Bu nedenle sunucunun bilmesi gereken oturum, yetkilendirme veya güvenlik verileri için tek başına uygun bir mekanizma değildir. Şifre, erişim belirteci, kimlik doğrulama bilgisi veya başka hassas verileri kullanıcı tercihi gibi localStorage içine koymayın. Tarayıcıda çalışan başka bir kod bu verilere erişebileceğinden, localStorage güvenli bir gizli bilgi deposu olarak kabul edilmemelidir.

Ayrıca kayıt, kullanıcının aynı tarayıcıdaki aynı kaynakta tutulur. Kullanıcı farklı tarayıcıya, farklı cihaza veya farklı bir profile geçtiğinde tercih otomatik olarak taşınmaz. Tercihin hesapla birlikte tüm cihazlarda korunması gerekiyorsa, uygun sunucu tarafı saklama ve senkronizasyon mekanizması gerekir.

Kayıt çalışmıyorsa ne kontrol edilmeli?​


Önce kaydın gerçekten yazılıp yazılmadığını aynı anahtarla okuyarak kontrol edin:

JavaScript: 
localStorage.setItem('denemeTercihi', 'koyu');
console.log(localStorage.getItem('denemeTercihi'));

Konsolda koyu görünüyorsa yazma ve okuma işlemi çalışıyor demektir. Daha sonra uygulamanızın kullandığı anahtar adının her yerde aynı olduğunu kontrol edin. siteTemasi ile site-temasi farklı anahtarlardır; bir yerdeki yazım farkı kayıt yokmuş gibi görünmesine neden olur.

Sonuç null ise o anahtarda kayıt bulunmamaktadır. Bu durum kodun mutlaka bozuk olduğunu göstermez; kullanıcı henüz seçim yapmamış, kayıt silinmiş veya farklı bir kaynakta çalışıyor olabilir. Değer bir nesne okunurken JSON.parse() hatası alınıyorsa tarayıcı depolamasındaki metin geçerli JSON değildir. Bu durumda kaydı silip varsayılan değeri yeniden oluşturun.

setItem() çağrısında hata oluşuyorsa depolama alanının kullanılamadığı, yazma işleminin engellendiği veya mevcut alanın doldurulduğu durumları ayrıca ele alın. Uygulama kritik bir tercihe dayanıyorsa setItem() işlemini try...catch içine alıp kayıt başarısız olduğunda tercihi yalnızca mevcut sayfa belleğinde kullanacak bir yedek davranış belirleyin. Böylece kaydın kalıcı olmadığını gizlemeden arayüzün çalışmasını sürdürebilirsiniz.

Sık sorulan sorular​

localStorage içine sayı veya doğru-yanlış değeri doğrudan kaydedilebilir mi?​

JavaScript bu değerleri metin olarak saklar. localStorage.setItem('sayac', 5) ile yazılan değer okunurken '5' olur; true ise 'true' olarak döner. Sayı için Number(), doğru-yanlış değeri için de açık bir karşılaştırma veya JSON.stringify() ve JSON.parse() kullanın.

localStorage kaydı her sayfada okunur mu?​

Kayıt, aynı kaynak kapsamındaki sayfalar arasında erişilebilir. Kaydı oluşturan adres ile okuyan adres farklı kaynaklara aitse, örneğin alan adı, protokol veya bağlantı noktası değişiyorsa aynı localStorage alanı kullanılmayabilir.

Kullanıcı tarayıcı verilerini silerse kayıt ne olur?​

Tarayıcı depolama verileri temizlenirse localStorage içindeki tercih de kaybolur. Uygulama böyle bir durumda getItem() sonucunun null olmasını beklemeli ve varsayılan tercihi yeniden uygulamalıdır.

localStorage ile kullanıcı tercihi tüm cihazlarda eşitlenir mi?​

Hayır. localStorage verisi tarayıcıya ve ilgili kaynağa yereldir. Tüm cihazlarda aynı tercihin görünmesi için tercihin sunucu tarafında kullanıcı hesabıyla ilişkilendirilmesi ve sayfa açılışında sunucuyla eşitlenmesi gerekir.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)