Öğeleri Alma, Ayarlama ve Kaldırma
Verileri okumak ve yazmak için Web Storage API'sini kullanın
Öğeleri Alma, Ayarlama ve Kaldırma, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. 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.
Storage API'sinin Sundukları
Hem localStorage hem de sessionStorage aynı dört temel yöntemi sunar: getItem(key), setItem(key, value), removeItem(key) ve clear(). Bunlar, tarayıcı tarafından desteklenen basit anahtar-değer depolarıdır.
setItem Dizeleri Saklar
localStorage.setItem("theme", "dark"), "theme" anahtarının altında bir dizeyi kalıcı olarak saklar. Hem anahtar hem de değer dize olmalıdır; dize olmayan değerler depolamadan önce String() aracılığıyla dönüştürülür ve bu işlem nesneleri ve dizileri sessizce bozabilir.
localStorage.setItem("theme", "dark");
localStorage.setItem("count", "42");Nesneleri JSON ile Saklama
Yapılandırılmış verileri saklamak için JSON ile serileştirin: localStorage.setItem("user", JSON.stringify(user)). Veriyi tekrar okuyun: const user = JSON.parse(localStorage.getItem("user")). Depolanan değerin hatalı biçimlendirilmiş olma ihtimaline karşı ayrıştırma işlemini her zaman try/catch içine alın.
const user = { name: "Ada", age: 30 };
localStorage.setItem("user", JSON.stringify(user));
const loaded = JSON.parse(localStorage.getItem("user"));getItem Dize veya null Döndürür
getItem("missing"), anahtar mevcut olmadığında null döndürür; hiçbir zaman undefined döndürmez. Varsayılan değerler sağlamak için nullish birleştirme işlecini kullanın: const theme = localStorage.getItem("theme") ?? "light".
Özellik Erişimi Sözdizimi
Köşeli parantez ve nokta gösterimini de kullanabilirsiniz: localStorage.theme = "dark" ve localStorage["theme"]. Her ikisi de çalışır; ancak amacınızı belirsizleştirir. Bunun yerine, bunun bir nesne özelliğinden çok kalıcı depolama olduğunu açıkça belirten yöntem çağrılarını tercih edin.
removeItem ve clear
localStorage.removeItem("theme"), tek bir anahtarı siler. localStorage.clear(), geçerli kaynak için tüm anahtarları temizler. clear() yıkıcı bir işlemdir; güçlü bir gerekçeniz olmadıkça hiçbir zaman çağırmayın. Sayfadaki her betik tarafından ayarlanan verileri siler.
Depolanan Anahtarlar Üzerinde Gezinme
Depolanan tüm anahtarlar üzerinde gezinmek için localStorage.length ve localStorage.key(index) kullanın veya Object.keys(localStorage) ifadesini açın. Bu yöntem, geçişler, hata ayıklama ve "cache:" ile başlayan tüm anahtarları kaldırmak gibi ön ek tabanlı temizlik işlemleri için kullanışlıdır.
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
console.log(key, localStorage.getItem(key));
}Kota Aşımı Hataları
Tarayıcılar kaynak başına yaklaşık 5-10 MB ayırır. Kotanın aşılması bir QuotaExceededError hatasına yol açar. Görüntü önbellekleri veya belge taslakları gibi büyük olabilecek değerleri saklarken, hatanın uygulamayı çökertmemesi için setItem çağrısını try/catch içine alın.
try {
localStorage.setItem("draft", largeString);
} catch (e) {
if (e.name === "QuotaExceededError") {
// free space, warn user, or fall back
}
}Anahtarlar İçin Ad Alanı Kullanma
Depolama alanı tüm kaynak genelinde paylaşılır. Aynı kaynakta çalışan diğer betikler, üçüncü taraf kitaplıkları ve tarayıcı uzantılarıyla çakışmaları önlemek için anahtarlarınızın önüne bir uygulama veya özellik adı ekleyin (app:settings, cart:items).
Eşzamanlı ve Engelleyici Yapı
Storage API'si tamamen eşzamanlıdır; her çağrı, disk G/Ç işlemi tamamlanana kadar ana iş parçacığını engeller. Çok büyük ikili nesneleri saklamaktan veya dar döngüler içinde setItem çağırmaktan kaçının; güncellemeleri bunun yerine tek bir serileştirilmiş nesne olarak toplu şekilde uygulayın.
sessionStorage ve localStorage Karşılaştırması
API yüzeyi aynıdır, kullanım ömrü farklıdır. sessionStorage sekme kapatıldığında temizlenir; localStorage tarayıcının yeniden başlatılmasından sonra da kalır. Geçici sihirbaz durumu için sessionStorage'ı, yeniden yüklemeden sonra da korunması gereken kullanıcı tercihleri için localStorage'ı seçin.
Bilgi Kontrolü
Anahtar hiç ayarlanmadığında localStorage.getItem("missing-key") ne döndürür?
Özet
getItem, setItem, removeItem ve clear, Web Depolama'nın dört temel unsurudur. Değerler her zaman dize olduğundan, yapılandırılmış verileri JSON ile sarmalayın. Kaynağı diğer betiklerle uyumlu şekilde paylaşmak için null döndürülebileceğini, QuotaExceededError oluşabileceğini ve anahtarlar için ad alanı kullanılması gerektiğini göz önünde bulundurun.
Sıkça Sorulan Sorular
“Öğeleri Alma, Ayarlama ve Kaldırma” dersi ücretsiz mi?
Evet — “Öğeleri Alma, Ayarlama ve Kaldırma” 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.
“Öğeleri Alma, Ayarlama ve Kaldırma” dersinde ne öğreneceğim?
Verileri okumak ve yazmak için Web Storage API'sini kullanın 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 2. dersidir.
“Öğeleri Alma, Ayarlama ve Kaldırma” 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