Jak korzystać z sessionStorage w JavaScript?

By /

JavaScript

sessionStorage jest częścią Web Storage API, która umożliwia przechowywanie danych w przeglądarce na czas trwania sesji strony. Dane przechowywane w sessionStorage są dostępne tylko w ramach tej samej karty (tab) przeglądarki i są usuwane po zamknięciu karty. W przeciwieństwie do localStorage, który przechowuje dane bez terminu ważności, sessionStorage oferuje bardziej przejściowe miejsce do przechowywania informacji. Jest to szczególnie przydatne dla danych, które nie powinny pozostać na urządzeniu użytkownika po zakończeniu sesji, takich jak informacje o logowaniu lub dane formularza.

Przykład użycia sessionStorage

W tym przykładzie pokażemy, jak można używać sessionStorage do przechowywania danych użytkownika podczas sesji oraz jak te dane mogą być wykorzystane i modyfikowane.

Kod HTML
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykład sessionStorage w JavaScript</title>
</head>
<body>
    <input type="text" id="dataInput" placeholder="Wpisz coś...">
    <button onclick="saveData()">Zapisz</button>
    <button onclick="showData()">Pokaż</button>
    <p id="showData"></p>

    <script src="script.js"></script>
</body>
</html>
Kod JavaScript (script.js)
// Funkcja do zapisywania danych w sessionStorage
function saveData() {
    const input = document.getElementById('dataInput').value;
    sessionStorage.setItem('userData', input);
}

// Funkcja do wyświetlania danych z sessionStorage
function showData() {
    const storedData = sessionStorage.getItem('userData');
    document.getElementById('showData').innerText = 
               storedData ? storedData : 'Brak zapisanych danych.';
}

Opis działania

  • W powyższym przykładzie, użytkownik ma możliwość wpisania danych do pola tekstowego.
  • Po kliknięciu przycisku “Zapisz”, dane są zapisywane do sessionStorage za pomocą metody setItem(), gdzie 'userData' jest kluczem, a wpisany tekst wartością.
  • Kliknięcie przycisku “Pokaż” wywołuje funkcję showData(), która pobiera dane z sessionStorage używając klucza 'userData' i wyświetla je w paragrafie. Jeśli nie ma zapisanych danych, wyświetlany jest komunikat “Brak zapisanych danych.”.

Podsumowanie

sessionStorage jest potężnym narzędziem dla deweloperów webowych, umożliwiającym przechowywanie danych po stronie klienta na czas trwania sesji przeglądarki. Jego główne zastosowania to przechowywanie danych formularzy, informacji o sesji lub innych danych tymczasowych, które nie wymagają długotrwałego przechowywania poza sesją. Dzięki prostemu API, sessionStorage jest łatwy w użyciu i może znacząco poprawić doświadczenie użytkownika na stronach internetowych, zapewniając jednocześnie bezpieczne przechowywanie danych.

 

Powiązane artykuły

Scroll to Top