11. localStorage i persystencja

This content is not available in your language yet.

O czym jest ta prezentacja?

localStorage i persystencja

localStorage pozwala przechowywać dane w przeglądarce, które przeżywają odświeżenie strony. sessionStorage przeżywa tylko sesję (zakładkę). W React integrujemy je przez useEffect przy zmianie stanu i inicjalizację useState z localStorage.

Kluczowe pytania do odpowiedzi

localStorage vs sessionStorage? — localStorage: trwały, sessionStorage: tylko sesja przeglądarki
Jak serializować dane? — Tylko stringi — JSON.stringify i JSON.parse
Jak zintegrować z React state? — Inicjalizacja z localStorage + useEffect do synchronizacji
Ograniczenia? — ~5MB limit, synchroniczne API, tylko strings, brak szyfrowania

Zakres merytoryczny

Podstawowe API — setItem, getItem, removeItem, clear, length
JSON serialization — stringify/parse dla obiektów i tablic
Inicjalizacja useState z localStorage — lazy initializer
Synchronizacja przez useEffect — zapis przy zmianie stanu
Custom hook useLocalStorage — reużywalny wzorzec

Wymagane elementy wizualne

Schemat

Diagram: React State ←→ localStorage. Przy mount: localStorage → initialState. Przy zmianie stanu: state → localStorage (useEffect). Pokazuje synchronizację dwukierunkową.

Przykład kodu JSX

Lista zadań (todo list) która przeżywa odświeżenie strony dzięki localStorage.

Warianty realizacji

localStorage vs sessionStorage — różnice
setItem/getItem z JSON
Prosty przykład: zapamiętanie motywu (dark/light)

Forma: 10 slajdów, 10 minut

Ocena: 3.0

Scenariusze i przykłady

Przykład 1 — Todo list z persystencją

function TodoApp() {
  // Inicjalizacja ze localStorage (lazy initializer)
  const [todos, setTodos] = useState(() => {
    const stored = localStorage.getItem('todos');
    return stored ? JSON.parse(stored) : [];
  });
  const [input, setInput] = useState('');

  // Synchronizacja z localStorage przy każdej zmianie
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  const addTodo = () => {
    if (!input.trim()) return;
    setTodos(prev => [...prev, { id: Date.now(), text: input, done: false }]);
    setInput('');
  };

  const toggleTodo = (id) => {
    setTodos(prev => prev.map(t =>
      t.id === id ? { ...t, done: !t.done } : t
    ));
  };

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={addTodo}>Dodaj</button>
      <ul>
        {todos.map(todo => (
          <li
            key={todo.id}
            onClick={() => toggleTodo(todo.id)}
            style={{ textDecoration: todo.done ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

Wskazówki do wystąpienia

Demo w DevTools

Otwórzcie DevTools → Application → Local Storage. Pokażcie dane w czasie rzeczywistym gdy użytkownik interaguje z aplikacją. Efekt wow!

Ostrzeżenie bezpieczeństwa

Podkreślcie: NIE przechowujcie tokenów JWT, haseł, danych kart w localStorage — to plain text dostępny dla każdego JS na stronie (XSS).

Zasoby

MDN — localStorage Kompletna dokumentacja localStorage.

MDN — Web Storage API Przegląd Web Storage.

Do dzieła!

Trwałość danych bez serwera!

localStorage to pierwsza linia persystencji — przydatne w każdym projekcie od motywu po koszyk zakupów!