Yükleniyor...

HTML Web Storage

Önceki canvas, JavaScript’in boyadığı boş bir bitmap’ti. Bu ders çizimi bırakır ve Web Storage’ı tanıtır: tarayıcıda localStorage ve sessionStorage ile küçük anahtar/değer dizelerini hatırlamak. HTML hâlâ betik yükler; betik depolama API’lerini çağırır. Kapsam pratik — kaydet/oku ve ömür — çerez, IndexedDB veya sunucu veritabanı kursu değil.

HTML kursunda neden web storage

Yeni başlayanlar temanın veya adın yenilemeden sonra kalmasını ister. Web Storage ilk yaygın araçtır. Canvas’tan sonra bölünme farklıdır: HTML kabuğa; JS o origin için dize hatırlamaya sahiptir. setItem, getItem ve local vs session yeter.

Doğrudan yanıt

1) localStorage.setItem dize kaydeder. 2) getItem okur. 3) localStorage temizlenene kadar. 4) sessionStorage sekme/oturum için. 5) Hiçbir HTML etiketi API’lerin yerini almaz. 6) Yalnızca hafif tercihler; nesneler JSON ister çünkü değerler dizedir.

📊 localStorage vs sessionStorage

Topic localStorage sessionStorage
Typical lifetime Until cleared by user/site/code Until the tab/session ends
Survives browser restart Usually yes (same origin) No
Shared across tabs (same origin) Yes (same storage) No (per tab/session)
API shape setItem / getItem / removeItem Same method names
Beginner fit Theme, language preference One-tab wizard draft, temp flags
This course depth Intro save/read only Intro save/read only

Küçücük localStorage demosu

Tıklama bir selamı kaydedip paragrafta gösterir. Yenilemeden sonra getItem hâlâ o origin için değeri bulur — «local» fikri.

localStorage setItem and getItem

html 
<button id="save" type="button">Remember hi</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("greet");
if (saved) {
out.textContent = "Saved: " + saved;
}
document.getElementById("save").onclick = function () {
localStorage.setItem("greet", "hi");
out.textContent = "Saved: " + localStorage.getItem("greet");
};
</script>

localStorage çağrılarını okumak

  • localStorage sayfa betikleri için tarayıcı nesnesidir
  • setItem anahtar altında dize saklar
  • getItem okur (veya null)
  • p’de göstermek çizmeden kalıcılığı kanıtlar (canvas’tan farklı)
  • Anahtarlar ve değerler dizelerdir
  • Silme: removeItem veya DevTools

Yalnızca sekme verisi için sessionStorage

Aynı yöntem adları, daha kısa ömür. Kapanınca giden tek-sekme taslağı için yararlıdır.

sessionStorage note

html 
<label for="note">Tab-only note</label>
<input id="note" type="text" />
<button id="keep" type="button">Keep in this tab</button>
<p id="shown"></p>
<script>
const input = document.getElementById("note");
const shown = document.getElementById("shown");
const prior = sessionStorage.getItem("note");
if (prior) {
input.value = prior;
shown.textContent = "Restored in this tab: " + prior;
}
document.getElementById("keep").onclick = function () {
sessionStorage.setItem("note", input.value);
shown.textContent = "Kept: " + sessionStorage.getItem("note");
};
</script>

sessionStorage fikrini okumak

  • Aynı setItem/getItem kalıbı
  • Aynı sekmede yenilemede geri gelir
  • Başka sekme tipik olarak aynı veriyi görmez
  • Hâlâ dizeler; parolalar için değil
  • Ömür ihtiyacına göre local vs session seçin
  • Sonraki: geolocation

Ne saklanır

  • Tema/dil: localStorage
  • Yalnızca bu sekmenin sihirbaz bayrağı: sessionStorage
  • Sırlar: ikisi de değil
  • Büyük dosyalar: bu girişin ötesi
  • Sunucu hesapları: backend
  • Piksel çizmek: canvas’tı

Alıştırma — bir tercihi hatırla

  1. localStorage demosunu yapıştırıp kaydedin.
  2. Yenileyin; geri yüklemeyi doğrulayın.
  3. Aynı sekmede sessionStorage deneyin.
  4. Sekmeyi kapatıp yeniden açın.
  5. Sayı kaydedin — dize olarak döner.
  6. Cümle: canvas piksel boyar; Web Storage dize kaydeder.
  7. İleri: geolocation.

Kolay hatalar

  • storage etiketi beklemek
  • Parola saklamak
  • Dize olduğunu unutmak (nesneler için JSON)
  • canvas veya çerezlerle karıştırmak
  • sessionStorage’ı sonsuz sanmak
  • Diğer cihazlarla paylaşımı varsaymak
  • Girişi tam DB kursu saymak

Özet

  • Web Storage bir JS API’sidir: localStorage ve sessionStorage
  • setItem/getItem origin’iniz için dize kaydeder/okur
  • local temizlenene kadar; session sekme/oturum için
  • Hafif tercihler için — sırlar için değil
  • Canvas pikseldi; bu ders hatırlanan dizeler
  • Sonraki: HTML geolocation

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
5
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 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
Konu 63 / 68
Html Ders