Tutorials

Angular LocalStorage Tutorial: Formular-Daten speichern und laden

Melden

Hier ist ein ausführliches Tutorial, wie du Formulardaten in Angular mithilfe von LocalStorage speichern und wieder abrufen kannst.

LocalStorage ist eine einfache Möglichkeit, Daten direkt im Browser des Benutzers zu speichern. Diese Daten bleiben auch nach dem Neuladen der Seite oder dem Schließen des Browsers erhalten.

Voraussetzungen

  • Eine bestehende Angular-Anwendung.
  • Grundkenntnisse in Reactive Forms.

Schritt 1: ReactiveFormsModule importieren

Um Formulare in Angular effizient zu verwalten, nutzen wir ReactiveFormsModule. Öffne deine app.module.ts und füge den Import hinzu:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [ ... ],
  imports: [
    BrowserModule,
    ReactiveFormsModule // Hier hinzufügen
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Schritt 2: Das Formular in der Komponente erstellen

In der Datei app.component.ts definieren wir das Formular und die Logik für den LocalStorage.

Wichtig: Da LocalStorage nur Strings speichern kann, müssen wir Objekte mit JSON.stringify() umwandeln und beim Auslesen mit JSON.parse() wieder in ein Objekt zurückführen.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  userForm: FormGroup;
  storageKey = 'user_data';

  constructor() {
    // Formular initialisieren
    this.userForm = new FormGroup({
      firstname: new FormControl(''),
      lastname: new FormControl(''),
      email: new FormControl('')
    });
  }

  ngOnInit(): void {
    // Beim Laden der Komponente Daten aus LocalStorage abrufen
    this.loadFormData();
  }

  // Daten im LocalStorage speichern
  saveToLocalStorage(): void {
    const data = this.userForm.value;
    localStorage.setItem(this.storageKey, JSON.stringify(data));
    alert('Daten erfolgreich im LocalStorage gespeichert!');
  }

  // Daten aus LocalStorage laden
  loadFormData(): void {
    const savedData = localStorage.getItem(this.storageKey);
    if (savedData) {
      // String zurück in Objekt umwandeln und Formular befüllen
      this.userForm.patchValue(JSON.parse(savedData));
    }
  }

  // LocalStorage leeren
  clearStorage(): void {
    localStorage.removeItem(this.storageKey);
    this.userForm.reset();
  }
}

Schritt 3: Das HTML-Template erstellen

Erstelle in der app.component.html ein einfaches Formular, das an unsere userForm gebunden ist.

<div style="padding: 20px;">
  <h1>Angular LocalStorage Formular</h1>

  <form [formGroup]="userForm" (ngSubmit)="saveToLocalStorage()">
    <div>
      <label>Vorname:</label><br>
      <input type="text" formControlName="firstname">
    </div>

    <br>

    <div>
      <label>Nachname:</label><br>
      <input type="text" formControlName="lastname">
    </div>

    <br>

    <div>
      <label>E-Mail:</label><br>
      <input type="email" formControlName="email">
    </div>

    <br>

    <button type="submit">Daten Speichern</button>
    <button type="button" (click)="clearStorage()">Speicher löschen</button>
  </form>

  <hr>
  <h3>Aktueller Status im LocalStorage:</h3>
  <p>Wenn du die Seite neu lädst, bleiben die eingegebenen Daten erhalten.</p>
</div>

Funktionsweise erklärt

  1. Speichern (setItem): Wenn der Benutzer auf "Speichern" klickt, wird die Funktion saveToLocalStorage() aufgerufen. Mit this.userForm.value erhalten wir ein JavaScript-Objekt. Da der LocalStorage nur Text akzeptiert, nutzen wir JSON.stringify().
  2. Laden (getItem): In der ngOnInit()-Methode prüfen wir, ob unter dem Schlüssel user_data bereits etwas im Browser gespeichert ist. Wenn ja, konvertieren wir den String mit JSON.parse() zurück in ein Objekt und nutzen patchValue(), um die Formularfelder automatisch zu füllen.
  3. Löschen (removeItem): Um die Daten zu entfernen, nutzen wir localStorage.removeItem().

Tipps für die Praxis

  • Sicherheit: Speichere niemals sensible Daten wie Passwörter oder Kreditkartendaten im LocalStorage, da dieser über JavaScript leicht ausgelesen werden kann (XSS-Gefahr).
  • Größe: LocalStorage ist auf ca. 5MB begrenzt. Für einfache Formulare ist das völlig ausreichend.
  • JSON Handling: Achte immer darauf, JSON.parse() in einen try-catch-Block zu setzen oder vorher auf Existenz zu prüfen, um Fehler zu vermeiden, falls der Inhalt im LocalStorage kein gültiges JSON ist.
0