30. localStorage i sessionStorage — persystencja danych

Web Storage — dane w przeglądarce

Web Storage API daje dostęp do localStorage (trwałe, do wyczyszczenia) i sessionStorage (tylko sesja, zamknięcie karty usuwa dane). Obie przechowują wyłącznie stringi — do przechowywania obiektów potrzebujemy JSON.stringify/parse. Idealne dla: ustawień, motywu, koszyka, stanu formularza.

localStorage to najprostsza forma persystencji bez serwera. Każda aplikacja z “zapamiętaj moje ustawienia” lub “wróć do wypełnionego formularza” go używa.

1. Opisać localStorage i sessionStorage — różnice i API
2. Wyjaśnić JSON serialization dla przechowywania obiektów
3. Pokazać integrację z React state przez useEffect
4. Omówić ograniczenia i bezpieczeństwo

1. localStorage API — setItem, getItem, removeItem, clear, key
2. sessionStorage — identyczne API, inny scope
3. JSON.stringify/parse — serializacja obiektów i tablic
4. React integracja — lazy initializer + useEffect synchronizacja
5. Bezpieczeństwo — co NIE przechowywać (tokeny JWT, hasła)

• Struktura minimalna

1. Wstęp — potrzeba persystencji po stronie klienta
2. Rozdział 1: Web Storage API — localStorage vs sessionStorage
3. Rozdział 2: React integracja — useState + useEffect
4. Rozdział 3: Ograniczenia i bezpieczeństwo
5. Podsumowanie
6. Bibliografia

localStorage = stan który przeżywa odświeżenie!

Pokaż w DevTools → Application → Storage jak dane pojawiają się i znikają. Konkretne wartości w tablicy przeglądarkowej są bardzo przekonujące.