Sobes.tech
Junior

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