Wyjaśnij różnicę między cookies, sessionStorage a localStorage.
sobes.tech AI
Odpowiedź od AI
Cookies, sessionStorage i localStorage to mechanizmy przechowywania danych w sieci, które różnią się przeznaczeniem, czasem życia i ilością przechowywanych danych.
-
Cookies: Małe fragmenty danych wysyłane przez serwer internetowy i przechowywane na komputerze użytkownika przez przeglądarkę internetową. Są wysyłane przy każdym kolejnym żądaniu do tego samego serwera. Służą do uwierzytelniania, przechowywania preferencji użytkownika, śledzenia stanu koszyka.
- Czas życia: Ustalany podczas tworzenia (może być sesyjny lub z określonym terminem wygaśnięcia).
- Rozmiar: Ograniczony, zazwyczaj kilka kilobajtów (około 4 KB).
-
sessionStorage: Przechowuje dane tylko na czas jednej sesji przeglądarki (otwartego zakładki lub okna). Dane są usuwane po zamknięciu zakładki lub okna.
- Czas życia: Do zamknięcia zakładki lub okna przeglądarki.
- Rozmiar: Znacznie większy niż w przypadku cookies (zazwyczaj kilka megabajtów).
-
localStorage: Przechowuje dane bez daty wygaśnięcia, dopóki nie zostaną one jawnie usunięte przez użytkownika lub skrypt. Dostępny we wszystkich zakładkach i oknach tego samego domeny.
- Czas życia: Stały (do momentu jawnego usunięcia).
- Rozmiar: Znacznie większy niż w przypadku cookies (zazwyczaj kilka megabajtów).
Oto krótka porównawcza tabela:
| Mechanizm | Czas życia | Dostępność | Wysyłane do serwera | Rozmiar (typowy) | Przeznaczenie |
|---|---|---|---|---|---|
| Cookies | Sesyjny lub z określonym czasem | Przez nagłówki HTTP | Tak | ~4 KB | Uwierzytelnianie, śledzenie, preferencje |
| sessionStorage | Do zamknięcia zakładki/okna | Przez API JS | Nie | ~5-10 MB | Tymczasowe przechowywanie danych sesji |
| localStorage | Stały (do usunięcia) | Przez API JS | Nie | ~5-10 MB | Długoterminowe przechowywanie danych |
Przykłady użycia API JavaScript:
// Cookies (dostęp przez document.cookie, wymaga ręcznego parsowania i serializacji)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
// sessionStorage
sessionStorage.setItem('id', '123');
let userId = sessionStorage.getItem('id');
sessionStorage.removeItem('id');
// localStorage
localStorage.setItem('theme', 'dark');
let userTheme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear(); // Czyści wszystkie dane w localStorage