Web Storage
Tarayıcı bu site için kısa bir not tutar. Satır saved / lida / tea okunur. Bu sayfada konuk lida ve içecek tea durur. localStorage tarayıcı kapanınca da durur.
Desen sayfası burada bitmedi
Eksik anahtar bir şey fırlatmaz: getItem null döndürür. Desen sayfası true / Order: mint ile bitti. Çerezler sonraki sayfanın konusu. Bu depo, tarayıcının gönderdiği her isteğe yapışık değildir.
Sayı da metin olarak durur
setItem bir anahtarın altına yazar, getItem onu okur. Sayı metin olarak saklanır.
localStorage.setItem("drink", "tea");
console.log(localStorage.getItem("drink"));
console.log(localStorage.getItem("size"));
Günlük önce tea, sonra null gösterir, çünkü size hiç yazılmadı. Yeniden yüklemeden sonra getItem("drink") hâlâ tea. setItem("count", 2) sayı değil, 2 karakterlerini koyar.
Nesne metin olarak gider
Düz bir nesneyi setItem ile verirsen saklanan metin [object Object] olur. JSON.stringify saklanabilir metin üretir, JSON.parse nesneyi yeniden kurar. JSON.parse(null) hata fırlatır; önce oku, değer null ise ayrıştırmayı atla.
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const raw = localStorage.getItem("w3-order");
const back = JSON.parse(raw);
console.log(back.guest + " / " + back.drink);
Aynı kökendeki her sayfa o anahtarı okuyabilir. w3-order anahtarı metin tutar, ayrıştırılmış değer yine nesnedir. Günlük lida / tea.
Sekmenin ömrü, tarayıcının ömrü
sessionStorage aynı üç yönteme sahiptir ve o sekme kapanana kadar yaşar. Tarayıcı yeniden açılınca localStorage hâlâ oradadır. removeItem bir anahtarı siler. clear bu kökenin bütün anahtarlarını siler; tek bir siparişi derlemek için çağırma.
sessionStorage.setItem("drink", "mint");
console.log(sessionStorage.getItem("drink"));
sessionStorage.removeItem("drink");
console.log(sessionStorage.getItem("drink"));
İkinci sekme o sessionStorage anahtarını görmez. localStorage içindeki w3-order iki sekmede de vardır. Sekmeyi kapatmak yalnız oturum notunu düşürür. Önce mint, sonra null.
Bir köken, bütün sayfalar
Şema, konak ve kapı kutuyu paylaşır. Bu kutu tek bir dosyaya ait değildir. Ana sayfada konan anahtar aynı sitenin sipariş sayfasında görünür. Başka bir site onu okuyamaz.
Sayfa ne gösterir
Sayfa siparişi yazar, geri okur ve konuğu ile içeceği gösterir.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const back = JSON.parse(localStorage.getItem("w3-order"));
document.querySelector("#line").textContent =
"saved / " + back.guest + " / " + back.drink;
</script>
</body>
</html>
true / Order: mint desen sayfasıydı. Yenile: aynı sözcükler localStorage üzerinden geri gelir. Satır saved / lida / tea okunur.
Beş kısa alıştırma
- setItem ile drink değerini tea yap. getItem tea döndürür.
- size için getItem çağır. Sonuç null.
- Siparişi JSON.stringify ile kaydet. JSON.parse sonrası günlük lida / tea.
- mint değerini sessionStorage içine koy, sonra removeItem. getItem null döndürür.
- Sayfayı oku. Satır saved / lida / tea.
Yanlışlar
Depo dizeleri hatırlar, canlı nesneleri değil. clear bütün köken içindir, tek anahtar için değil.
- Nesne verip sonra [object Object] okumak
- null üzerinde JSON.parse çağırmak
- sessionStorage değerinin yeni sekmede kalmasını beklemek
- clear çağırıp her anahtarı silmek
- Satırı true / Order: mint diye okumak
Aklında kalsın
- setItem ve getItem dizeleri saklar ve okur
- eksik anahtar null döner
- nesneler JSON.stringify ile girer, JSON.parse ile çıkar
- localStorage yeniden başlatmaya dayanır
- sessionStorage sekmeyle biter
- sayfa satırı saved / lida / tea
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek