3I_WTL_2025/26_localstorage

26 - LocalStorage (Perzistence dat)

🎯 Co se naučíte

V této lekci se naučíte, jak ukládat jednoduchá data přímo do prohlížeče uživatele, aby zůstala zachována i po zavření okna nebo restartování počítače.

📚 Témata lekce

• LocalStorage - úložiště v prohlížeči (trvalé, dokud není smazáno)
• setItem(key, value) - uložení dat pod konkrétním klíčem
• getItem(key) - načtení dat pomocí klíče
• removeItem(key) / clear() - mazání dat
• Perzistence - zachování stavu aplikace (vítání uživatele, počítadlo návštěv)
• JSON.stringify / JSON.parse - techniky pro ukládání objektů a polí (v této lekci jen zmíněno pro jednoduchá data)

📂 Soubory v projektu

• index.html - rozhraní pro zadání jména a zobrazení počítadla
• script.js - logika pro práci s localStorage
• style.css - stylování stránky

💻 Klíčové koncepty

Práce s daty v LocalStorage:

// Uložení jména
localStorage.setItem("userName", "Jan Novák");

// Načtení jména
const savedName = localStorage.getItem("userName");

// Smazání konkrétního klíče
localStorage.removeItem("userName");

// Smazání celého úložiště
localStorage.clear();

Počítadlo návštěv:

let visits = localStorage.getItem("visitCount") || 0;
visits = parseInt(visits) + 1;
localStorage.setItem("visitCount", visits);

🚀 Jak s lekcí pracovat

1. Otevřete index.html.
2. Zadejte své jméno a klikněte na tlačítko uložit.
3. Obnovte stránku (F5) - uvidíte, že vás stránka stále vítá jménem a počítadlo návštěv se zvýšilo.
4. Zavřete prohlížeč a znovu jej otevřete - data tam stále budou.
5. Klikněte na tlačítko pro vymazání dat a pozorujte změnu.

🔗 Související lekce

• Předchozí: 25_fetch_await - Práce s asynchronními daty
• Dokumentace: Web Storage API - MDN