Depolama Olaylarını Dinleme
storage olayıyla sekmeler arası depolama değişikliklerine tepki verin
Depolama Olaylarını Dinleme, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. 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, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Sekmeler Arası İletişim
Web Depolama, localStorage her değiştiğinde aynı kaynakta bulunan diğer sekmelerin her birinde bir storage olayı tetikler. Bu, aynı uygulamanın birden fazla açık sekmesini eşzamanlı tutmanın en basit yoludur; örneğin oturum kapatma veya tema değişikliğini diğer sekmelere iletebilirsiniz.
Dinleyici Kaydetme
İşleyiciyi window üzerine ekleyin: window.addEventListener("storage", handleStorage). Dinleyici yalnızca aynı kaynağın diğer sekmelerinde veya pencerelerinde çalışır; değişikliği gerçekleştiren sekmede asla çalışmaz, çünkü o sekme güncellemeyi zaten bilir.
window.addEventListener("storage", (e) => {
console.log("key:", e.key, "new:", e.newValue);
});StorageEvent Özellikleri
Olay, key (değişen anahtar), oldValue ve newValue (dizeler veya null), url (değişikliği tetikleyen sayfa) ve storageArea (Storage nesnesi; localStorage veya sessionStorage) bilgilerini taşır.
clear() Anahtarı null Yapar
Başka bir sekme localStorage.clear() çağırdığında depolama olayı, key === null olacak ve hem oldValue hem de newValue null olacak şekilde bir kez tetiklenir. Toplu temizlemeyi tek anahtarlı güncellemelerden ayrı ele almak için bu deseni algılayın.
removeItem Davranışı
Bir removeItem çağrısı, newValue === null olacak ve önceki dizeyi oldValue tutacak şekilde olayı tetikler. "Anahtar silindi" durumunu "anahtara null dizesi atandı" durumundan ayırmak için newValue değerinin "null" dizesi değil, kesin olarak null olduğunu denetleyin.
Aynı Sekme Sınırlaması
Olay, değişikliği yazan sekmede hiçbir zaman tetiklenmez. Kendi yazma işlemlerinize tepki vermek için setItem işleminden sonra özel bir olay gönderin veya hem depolama API'sini hem de uygulama içi olay veri yolunuzu çağıran bir yardımcı içinde setItem'i sarmalayın.
function setItem(key, val) {
localStorage.setItem(key, val);
window.dispatchEvent(new CustomEvent("local-storage", { detail: { key, val } }));
}Sekmeler Arası Oturum Kapatma
Kullanıcı oturumu kapattığında zaman damgasıyla birlikte auth:logout gibi bir anahtar ayarlayın. Diğer sekmeler depolama olayında bu anahtarı dinler, kendi oturum durumlarını hemen temizler ve kullanıcının yeniden tıklamasına gerek kalmadan giriş sayfasına yönlendirir.
Tema ve Tercih Eşzamanlaması
Kullanıcı bir sekmede temayı değiştirdiğinde theme değerini localStorage'a yazın. Diğer tüm sekmelerdeki depolama işleyicisi yeni değeri okur ve document.documentElement.dataset.theme değerini uygular; değişiklik açık tüm sekmelerde anında görünür.
Anahtara Göre Filtreleme
Bir işleyici, e.key değerine göre dallanarak birçok özelliğe hizmet edebilir. Bir switch deyimi dağıtıcıyı okunabilir tutar: her case tek bir depolama anahtarını işler ve diğer özelliklerin aynı Storage alanına yazdığı ilgisiz değişiklikleri yok sayar.
sessionStorage Sekmeler Arasında Çalışmaz
sessionStorage sekme başınadır; yazma işlemleri diğer sekmelerde hiçbir zaman depolama olaylarını tetiklemez, çünkü her sekmenin bağımsız bir sessionStorage alanı vardır. Sekmeler arası sinyal gerektiğinde, anahtarı hemen ardından kaldırsanız bile localStorage kullanın.
BroadcastChannel Alternatifi
Daha gelişmiş sekmeler arası iletişim için BroadcastChannel API'si depolama alanına dokunmadan yapılandırılmış veriler gönderir: new BroadcastChannel("app").postMessage({ type: "logout" }). Geçici sinyaller için BroadcastChannel'ı, kalıcı olması da gereken durumlar için depolama olaylarını kullanın.
Bilgi Kontrolü
Sekme A localStorage.setItem("theme", "dark") çağırırsa depolama olayını hangi sekmeler alır?
Özet
Depolama olayı, localStorage başka bir sekmede değiştiğinde anahtar, oldValue, newValue ve storageArea bilgileriyle sekmeler arası bildirimler gönderir. Yazma işlemini gerçekleştiren sekmede tetiklenmez; bu nedenle tam yerel ve uzak dağıtım için olayı özel bir olayla birleştirin. Oturum kapatma iletiminde, tema eşzamanlamasında ve tarayıcı pencereleri arasında tutarlı kalması gereken her türlü durumda kullanın.
Sıkça Sorulan Sorular
“Depolama Olaylarını Dinleme” dersi ücretsiz mi?
Evet — “Depolama Olaylarını Dinleme” 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 HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“Depolama Olaylarını Dinleme” dersinde ne öğreneceğim?
storage olayıyla sekmeler arası depolama değişikliklerine tepki verin HTML 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.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML 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 3. dersidir.
“Depolama Olaylarını Dinleme” 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 HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML 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
- localStorage ve sessionStorage Karşılaştırması
- Öğeleri Alma, Ayarlama ve Kaldırma
- Depolama Olaylarını Dinleme
- Güvenlik: Depolamada Asla Tutulmaması Gerekenler