Tutorials

Session Storage in Angular verstehen: Grundlagen und Anwendung

Melden

Hier ist ein ausführliches Tutorial zum Thema Session Storage in Angular.

Der sessionStorage ist Teil der Web Storage API und ermöglicht es dir, Daten direkt im Browser zu speichern. Im Gegensatz zum localStorage bleiben die Daten im sessionStorage nur so lange erhalten, wie der jeweilige Browser-Tab geöffnet ist. Sobald der Tab oder das Fenster geschlossen wird, werden die Daten gelöscht.

1. Was ist Session Storage?

Bevor wir in den Code eintauchen, hier die wichtigsten Merkmale:

  • Gültigkeit: Die Daten bleiben bei Page-Refreshes (F5) erhalten, werden aber beim Schließen des Tabs gelöscht.
  • Scope: Die Daten sind nur in dem Tab verfügbar, in dem sie gesetzt wurden (kein tab-übergreifender Zugriff).
  • Speicherlimit: In der Regel ca. 5 MB (je nach Browser).
  • Format: Es können nur Strings gespeichert werden.

2. Die grundlegenden Methoden

Die API ist sehr einfach und besteht aus vier Hauptfunktionen:

// Daten speichern
sessionStorage.setItem('key', 'value');

// Daten abrufen
const data = sessionStorage.getItem('key');

// Einen bestimmten Eintrag löschen
sessionStorage.removeItem('key');

// Alles im Session Storage löschen
sessionStorage.clear();

3. Implementierung in Angular

In Angular ist es Best Practice, den Zugriff auf den Storage über einen Service zu kapseln. Das macht den Code testbar und sauberer.

Schritt 1: Einen Storage-Service erstellen

Erstelle einen Service mit dem Befehl: ng generate service storage

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor() { }

  // Daten speichern (Objekte werden automatisch in Strings umgewandelt)
  public saveData(key: string, value: string) {
    sessionStorage.setItem(key, value);
  }

  // Daten abrufen
  public getData(key: string) {
    return sessionStorage.getItem(key);
  }

  // Daten löschen
  public removeData(key: string) {
    sessionStorage.removeItem(key);
  }

  // Alles löschen
  public clearData() {
    sessionStorage.clear();
  }
}

Schritt 2: Umgang mit Objekten (JSON)

Da der Session Storage nur Strings akzeptiert, müssen wir Objekte mit JSON.stringify umwandeln und beim Auslesen mit JSON.parse zurückverwandeln.

Erweitere den Service:

public saveObject(key: string, value: any) {
  sessionStorage.setItem(key, JSON.stringify(value));
}

public getObject(key: string) {
  const data = sessionStorage.getItem(key);
  return data ? JSON.parse(data) : null;
}

Schritt 3: Verwendung in einer Komponente

Jetzt kannst du den Service in jede beliebige Komponente injizieren.

import { Component, OnInit } from '@angular/core';
import { StorageService } from './storage.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="saveUserName()">Name speichern</button>
    <button (click)="loadUserName()">Name laden</button>
    <p>Aktueller User: {{ userName }}</p>
  `
})
export class AppComponent implements OnInit {
  userName: string | null = '';

  constructor(private storageService: StorageService) {}

  ngOnInit() {}

  saveUserName() {
    this.storageService.saveData('user_name', 'Max Mustermann');
    alert('Daten gespeichert!');
  }

  loadUserName() {
    this.userName = this.storageService.getData('user_name');
  }
}

4. Wann sollte man Session Storage verwenden?

  • Formulardaten: Wenn ein Nutzer ein langes Formular ausfüllt und die Seite versehentlich neu lädt.
  • Temporäre Zustände: Filter-Einstellungen in einer Liste, die nur für die aktuelle Sitzung relevant sind.
  • Security-Tokens: Kurzzeitige Authentifizierungs-Token (obwohl hier oft sicherere Methoden wie HttpOnly Cookies bevorzugt werden).

5. Wichtige Sicherheitshinweise

  1. Keine sensiblen Daten: Speichere niemals Passwörter oder private Kreditkartendaten im Session Storage. Er ist über JavaScript (XSS-Angriffe) zugänglich.
  2. Server-Side Rendering (SSR): Wenn du Angular Universal nutzt, achte darauf, dass sessionStorage nur im Browser existiert. Schütze den Zugriff mit einer Prüfung:
    if (typeof window !== 'undefined') {
   // Zugriff auf sessionStorage erlaubt
}

Fazit

Der sessionStorage in Angular ist ein mächtiges Werkzeug für das State-Management innerhalb einer Sitzung. Durch die Verwendung eines Services bleibt deine Angular-Anwendung strukturiert und wartungsfreundlich.

0