JavaScript Academy · Ders

Depolama Olayları ve Sınırlar

Değişikliklere tepki verin ve kota sınırlarına uyun.

Depolama Olayları ve Sınırlar, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Depolama Değişikliklerine Tepki Verme

storage olayı, bir sekmenin başka bir sekme localStorage değerini değiştirdiğinde tepki vermesini sağlar. Sekmeler arası basit bir eşzamanlama olanağı sunar.

Depolamayı Dinleme

window üzerinde bir dinleyici ekleyin. Aynı kaynağın OTHER sekmelerinde, localStorage her değiştiğinde tetiklenir; değişikliği yapan sekmede tetiklenmez.

window.addEventListener("storage", (e) => {
  console.log("Key changed:", e.key);
});

StorageEvent Nesnesi

Olay; key, oldValue, newValue, storageArea ve url bilgilerini taşır. Bunların tümü, tam olarak neyin değiştiğini açıklar.

window.addEventListener("storage", (e) => {
  console.log(e.key, e.oldValue, "->", e.newValue);
});

Yalnızca Diğer Sekmelerde Tetiklenir

Önemli bir ayrıntı şudur: olay, setItem çağrısını yapan aynı sekmede NOT tetiklenir. Diğer sekmeleri bilgilendirmek için tasarlanmıştır; bu nedenle aynı sekmedeki güncellemeler için ona güvenmeyin.

Sekmeler Arası Eşzamanlama Deseni

Örneğin, bir sekme kimlik doğrulama belirtecini sildiğinde kullanıcıyı her yerde oturumdan çıkarmak için olayı kullanarak sekmeleri tutarlı durumda tutun.

window.addEventListener("storage", (e) => {
  if (e.key === "token" && e.newValue === null) {
    logoutUI();
  }
});

clear() İşlemini Algılama

clear() çalıştığında olay, key değeri null olarak ayarlanmış şekilde tetiklenir. Her şeyi sıfırlamak için bu durumu ele alın.

window.addEventListener("storage", (e) => {
  if (e.key === null) resetApp();
});

Depolama Kotası

Her kaynak için sınırlı bir bütçe ayrılır; 5MB, localStorage için yaygın toplam sınırdır. Bu sınır IndexedDB'den çok daha küçüktür, bu nedenle yalnızca makul miktarda veri depolayın.

Kota Aşımı Hataları

Kotanın aşılması, setItem üzerinde bir QuotaExceededError hatası oluşturur. Büyük veya güvenilmeyen yazma işlemlerini her zaman try/catch içine alın.

try {
  localStorage.setItem("big", hugeString);
} catch (e) {
  console.log("Storage full:", e.name);
}

UTF-16 Sayımı İki Katına Çıkar

Dizeler UTF-16 olarak depolanır; bu nedenle her karakter yaklaşık 2 bayt kullanır. 5MB'lık bir kota yaklaşık 2,5 milyon karakter alır; ASCII olmayan metinlerde bu sayı daha düşüktür.

Kullanımı Tahmin Etme

Anahtarların ve değerlerin uzunluklarını toplayarak kullanımı yaklaşık olarak ölçebilirsiniz. Kesin bir API yoktur, ancak bu yöntem kullanılabilir bir tahmin verir.

let total = 0;
for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");

Daha Büyük Bir Çözüm Ne Zaman Kullanılmalı

Birkaç MB'ı aşan büyük veya yapılandırılmış veriler için IndexedDB kullanın. Web Depolama; küçük bayraklar, tercihler ve belirteçler için en uygunudur.

Hızlı Kontrol

Depolama olayları ve sınırlar.

Özet

storage olayı, bir kaynağın OTHER sekmelerini localStorage değişikliklerinden haberdar eder ve key, oldValue ile newValue bilgilerini taşır (clear işleminde key değeri null olur). Kotalar yaklaşık 5MB'dır ve bu sınırı aşan yazma işlemleri QuotaExceededError oluşturur. Bu nedenle riskli yazma işlemlerini try/catch içine alın ve daha büyük veriler için IndexedDB kullanın.

Sıkça Sorulan Sorular

“Depolama Olayları ve Sınırlar” dersi ücretsiz mi?

Evet — “Depolama Olayları ve Sınırlar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Depolama Olayları ve Sınırlar” dersinde ne öğreneceğim?

Değişikliklere tepki verin ve kota sınırlarına uyun. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Depolama Olayları ve Sınırlar” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Veri Saklama ve Okuma
localStorage ve sessionStorage Karşılaştırması
JSON ile Nesne Saklama
Depolama Olayları ve Sınırlar

← JavaScript Academy Sayfasına Dön