LocalStorage vs SessionStorage

O czym jest to opracowanie?

Web Storage API

LocalStorage i SessionStorage to mechanizmy Web Storage API, które pozwalaja przechowywac dane w przegladarce użytkownika. W przeciwienstwie do ciasteczek, dane te nie sa automatycznie wysyłane do serwera. LocalStorage przechowuje dane trwale, a SessionStorage - tylko do zamkniecia zakładki. Zrozumienie różnic i ograniczeń tych mechanizmow jest kluczowe dla prawidłowego projektowania aplikacji webowych.

Dlaczego warto to znac?

Przechowywanie stanu - Zapisywanie preferencji użytkownika, koszykow zakupowych, draftow formularzy
Offline-first - Dane dostepne nawet bez połączenia z internetem
Wydajnosc - Brak dodatkowych żądań do serwera po dane lokalne
Bezpieczeństwo - Zrozumienie, czego NIE wolno przechowywac w storage

Cel Twojego opracowania

Rozumiec czym jest Web Storage API i jak rozni się od cookies
Umiec wyjaśnić różnicę miedzy LocalStorage a SessionStorage
Potrafic pokazac przykłady kodu JavaScript do zapisu i odczytu danych
Wiedzieć jakie sa ograniczenia i zagrożenia bezpieczeństwa

Zakres obowiazkowy

Elementy merytoryczne

Web Storage API
- Czym jest Web Storage
- Różnica wzgledem cookies
- Limit pojemnosci (ok. 5-10 MB)
LocalStorage
- Trwałość danych (bez daty wygasniecia)
- Zakres (cała domena)
- Typowe zastosowania
SessionStorage
- Czas zycia (do zamkniecia zakładki/okna)
- Zakres (pojedyncza zakładka)
- Typowe zastosowania
Bezpieczeństwo
- Podatnosc na XSS
- Co można, a czego nie wolno przechowywac
- Porownanie z HttpOnly cookies

Wymagane przykłady kodu

Przykład 1

Zapis do localStorage - setItem() z roznymi typami danych

Przykład 2

Odczyt z localStorage - getItem() i obsługa null

Przykład 3

Zapis do sessionStorage - przykład z danymi formularza

Przykład 4

Usuwanie danych - removeItem() i clear()

Zakres rozszerzony (dla wyzszych ocen)

Przechowywanie obiektow (JSON.stringify/parse)
Obsługa zdarzenia storage (synchronizacja miedzy zakładkami)
IndexedDB jako alternatywa dla większych danych
Tryb prywatny i ograniczenia storage
Porownanie z cookies (tabela)
Implementacja prostego cache z TTL
Bezpieczne przechowywanie tokenow - dyskusja

Proponowana struktura pracy

Struktura podstawowa

Wstep (0.5 strony) - potrzeba przechowywania danych w przegladarce
Web Storage API (1 strona) - definicja, porownanie z cookies
LocalStorage (1.5 strony) - cechy, zastosowania, przykłady kodu
SessionStorage (1 strony) - cechy, zastosowania, przykłady kodu
Bezpieczeństwo (1 strona) - zagrożenia, dobre praktyki
Porownanie (0.5 strony) - tabela localStorage vs sessionStorage vs cookies
Podsumowanie (0.5 strony)
Bibliografia

Pytania kontrolne

Jaka jest główna różnica miedzy localStorage a sessionStorage?
Czy dane z localStorage sa wysyłane do serwera przy każdym zadaniu HTTP?
Dlaczego NIE powinno się przechowywac tokenu JWT w localStorage?
Jak zapisać obiekt JavaScript w localStorage?
Co się stanie z danymi sessionStorage po zamknieciu przegladarki?
Jak usunąć wszystkie dane z localStorage dla danej domeny?

Najczestsze błędy

Błąd	Jak poprawic?
Mylenie storage z baza danych	Wyjaśnij, że to pamiec lokalna przegladarki
Przechowywanie wrazliwych danych	Opisz zagrożenia XSS i co jest bezpieczne
Brak przykładów kodu JS	Każda sekcja z działającym przykładem
Pominiecie JSON.stringify	Pokaz jak przechowywac obiekty
Brak porownania z cookies	Przygotuj tabele porownawcza

Zasoby

MDN - Web Storage API Oficjalna dokumentacja Web Storage API

MDN - localStorage Szczegółowa dokumentacja localStorage

OWASP - HTML5 Security Bezpieczeństwo HTML5 w tym Web Storage

JavaScript.info - LocalStorage Praktyczny tutorial z przykładami

Do dziela!

To więcej niz praca zaliczeniowa

Opracowanie tego tematu to szansa, by naprawde zrozumiec jak przechowywac dane po stronie klienta. Każda nowoczesna aplikacja webowa korzysta z mechanizmow storage do poprawy UX.

Wykorzystaj lekcje - konsultuj watpliwosci, pokazuj postepy! Pracuj iteracyjnie - outline -> draft -> kod -> testy w przegladarce -> redakcja