SessionStorage

SessionStorage – część Web Storage API wprowadzona w specyfikacji HTML5. Umożliwia przechowywanie danych w przeglądarce internetowej po stronie klienta w zakresie jednej sesji przeglądarki. Dane zapisane w SessionStorage są dostępne dla wszystkich stron pochodzących z tego samego źródła (origin) oraz znikają po zamknięciu karty lub okna przeglądarki.

Historia

Przed pojawieniem się Web Storage API programiści wykorzystywali ciasteczka (cookies) do przechowywania danych po stronie klienta. Cookies mają ograniczenia rozmiaru (≈ 4 KB) i są automatycznie przesyłane przy każdym żądaniu HTTP, co wpływa na wydajność. W 2009 r. W3C opracowało specyfikację Web Storage, w której wprowadzono dwa mechanizmy:

• localStorage – trwałe przechowywanie danych.
• SessionStorage – przechowywanie danych ograniczone do jednej sesji.

Podstawowe cechy

• Zasięg (scope): dostępny jedynie w obrębie jednej sesji przeglądarki oraz jednego origin (schemat, domena, port).
• Rozmiar: zazwyczaj do 5 MB na origin (wartość zależy od przeglądarki).
• Trwałość: dane są usuwane automatycznie po zamknięciu karty/okna lub po wyczyszczeniu pamięci sesji.
• Bezpieczeństwo: nie są przesyłane w nagłówkach HTTP, a więc nie zwiększają ruchu sieciowego.
• Dostępność: interfejs dostępny z poziomu JavaScript poprzez obiekt window.sessionStorage.

API SessionStorage

Obiekt sessionStorage implementuje interfejs Storage i udostępnia następujące metody oraz własności:

• setItem(key, value) – zapisuje wartość (jako ciąg znaków) pod podanym kluczem.
• getItem(key) – odczytuje wartość zapisaną pod kluczem; zwraca null, jeśli klucz nie istnieje.
• removeItem(key) – usuwa parę klucz‑wartość.
• clear() – usuwa wszystkie wpisy w obrębie aktualnego origin.
• key(index) – zwraca klucz znajdujący się na danej pozycji (kolejność nie jest gwarantowana).
• length – własność zwracająca liczbę zapisanych elementów.

Przykładowy kod

<script>
    // zapisanie danych w sessionStorage
    sessionStorage.setItem('username', 'JanKowalski');
    sessionStorage.setItem('authToken', 'abcd1234');

    // odczytanie zapisanych danych
    const user = sessionStorage.getItem('username'); // "JanKowalski"
    const token = sessionStorage.getItem('authToken'); // "abcd1234"

    // usunięcie jednego elementu
    sessionStorage.removeItem('authToken');

    // wyświetlenie liczby przechowywanych wpisów
    console.log('Liczba kluczy:', sessionStorage.length);

    // wyczyszczenie całej pamięci sesji
    // sessionStorage.clear();
</script>

Różnice między SessionStorage a LocalStorage

Cecha	SessionStorage	LocalStorage
Trwałość	Do zamknięcia karty/okna	Trwałe, dopóki nie zostanie usunięte ręcznie
Zasięg	Jedna karta/okno, ale współdzielone między zakładkami tego samego origin w ramach jednej sesji	Wszystkie karty i okna tego samego origin
Wykorzystywanie	Przechowywanie danych tymczasowych (np. stan formularza, tymczasowe tokeny)	Dane trwałe (np. preferencje użytkownika, ustawienia aplikacji)

Bezpieczeństwo i ograniczenia

• Dane w sessionStorage są dostępne jedynie w kontekście JavaScript uruchamianego na tej samej stronie; nie są synchronizowane między różnymi domenami.
• Podobnie jak localStorage, sessionStorage nie jest zaszyfrowany – wrażliwe informacje powinny być chronione przed dostępem z nieautoryzowanego JavaScriptu (np. poprzez CSP).
• W przypadku ataku typu XSS atakujący może uzyskać dostęp do danych przechowywanych w sessionStorage.
• Nie jest dostępny w trybie prywatnym (incognito) w niektórych przeglądarkach – wówczas wywołania API mogą zwracać wyjątek QuotaExceededError.

Wsparcie przeglądarek

Większość współczesnych przeglądarek implementuje SessionStorage:

• Google Chrome – od wersji 4
• Mozilla Firefox – od wersji 3.5
• Safari – od wersji 4
• Microsoft Edge – od wersji 12
• Opera – od wersji 10.5

Dane są dostępne także w mobilnych wersjach przeglądarek (Chrome for Android, Safari iOS).

Przykłady zastosowań

• Zapamiętywanie wprowadzonych wartości w formularzu podczas przeładowania strony.
• Przechowywanie krótkoterminowych tokenów uwierzytelniających (np. OAuth 2.0).
• Utrzymywanie stanu aplikacji jednopunktowej (single‑page application) w trakcie sesji użytkownika.
• Obsługa wielokrotnych zakładek otwartych jednocześnie – każda karta posiada własny obszar SessionStorage, ale dostępny jest wspólny dla wszystkich zakładek tego samego origin w ramach tej samej sesji.

Powiązane tematy

Więcej informacji można znaleźć w następujących artykułach:

• Web Storage API
• localStorage
• JavaScript
• HTML5
• Cookie
• Cross‑Site Scripting (XSS)
• Content Security Policy (CSP)

Bibliografia

1. W3C Recommendation – Web Storage, 2011.
2. MDN Web Docs – SessionStorage (dokumentacja wewnętrzna).
3. Specyfikacja WHATWG – HTML Living Standard, sekcja dotycząca sessionStorage.