Wie man JSON Daten im Session Storage in Angular speichert

Key Takeaways

1. JSON-Daten müssen vor dem Speichern im Session Storage in Strings umgewandelt werden.
2. Ein dedizierter Angular-Service verbessert die Wiederverwendung und Organisation des Codes.
3. Vermeiden Sie das Speichern sensibler Daten aufgrund von Sicherheitsrisiken.

Session Storage ist ein leistungsstarkes Tool, um Daten während einer Sitzung temporär im Browser eines Benutzers zu speichern. In Angular-Anwendungen kann eine effektive Verwaltung des Session Storage die Benutzererfahrung verbessern, indem der Zustand bei Seitenneuladungen erhalten bleibt. Dieser Leitfaden führt Sie durch das Speichern und Abrufen von JSON-Daten im Session Storage innerhalb eines Angular-Kontexts.([Stack Overflow][1])

---

Session Storage verstehen

Session Storage ist Teil der Web Storage API, mit der Sie Schlüssel-Wert-Paare in einem Webbrowser speichern können. Im Gegensatz zum Local Storage, der Daten unbegrenzt speichert, behält der Session Storage Daten nur für die Dauer der Seitensitzung. Sobald der Browser-Tab geschlossen wird, werden die Daten gelöscht.([Stack Abuse][2], [JavaScript in Plain English][3])

---

JSON-Daten im Session Storage speichern

Da der Session Storage nur Strings speichern kann, müssen Sie Ihre JSON-Daten serialisieren, bevor Sie sie speichern. Hier ist, wie Sie dies in einer Angular-Komponente tun können:([Medium][4])

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

@Component({
  selector: 'app-example',
  template: `<p>Session Storage Example</p>`
})
export class ExampleComponent implements OnInit {
  ngOnInit() {
    const user = {
      name: 'John Doe',
      email: 'john.doe@example.com'
    };

    // Serialize and store the JSON object
    sessionStorage.setItem('user', JSON.stringify(user));
  }
}

In diesem Beispiel wird das user-Objekt mit JSON.stringify() in einen JSON-String konvertiert, bevor es im Session Storage gespeichert wird.([Stack Abuse][2])

---

JSON-Daten aus dem Session Storage abrufen

So rufen Sie die JSON-Daten aus dem Session Storage ab und deserialisieren sie:

const userData = sessionStorage.getItem('user');
if (userData) {
  const user = JSON.parse(userData);
  console.log(user.name); // Outputs: John Doe
}

Dieser Code ruft den stringifizierten JSON-String aus dem Session Storage ab und parst ihn mit JSON.parse() zurück in ein JavaScript-Objekt.([Stack Abuse][2])

---

Erstellen eines Session Storage Service in Angular

Für eine bessere Codeorganisation und Wiederverwendbarkeit sollten Sie einen dedizierten Service erstellen, um Session Storage-Operationen zu verarbeiten:([Stack Overflow][5])

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

@Injectable({
  providedIn: 'root'
})
export class SessionStorageService {
  setItem(key: string, value: any): void {
    try {
      const serializedValue = JSON.stringify(value);
      sessionStorage.setItem(key, serializedValue);
    } catch (error) {
      console.error('Error saving to session storage', error);
    }
  }

  getItem<T>(key: string): T | null {
    try {
      const item = sessionStorage.getItem(key);
      return item ? JSON.parse(item) as T : null;
    } catch (error) {
      console.error('Error reading from session storage', error);
      return null;
    }
  }

  removeItem(key: string): void {
    sessionStorage.removeItem(key);
  }

  clear(): void {
    sessionStorage.clear();
  }
}

Dieser Service bietet Methoden zum Setzen, Abrufen, Entfernen und Löschen von Elementen im Session Storage und übernimmt die Serialisierung und Deserialisierung intern.

---

Verwenden des Session Storage Service

Injizieren Sie den SessionStorageService in Ihre Komponenten, um den Session Storage zu verwalten:

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

@Component({
  selector: 'app-user',
  template: `<p>User Component</p>`
})
export class UserComponent implements OnInit {
  constructor(private sessionStorageService: SessionStorageService) {}

  ngOnInit() {
    const user = {
      name: 'Jane Smith',
      email: 'jane.smith@example.com'
    };

    this.sessionStorageService.setItem('user', user);

    const storedUser = this.sessionStorageService.getItem<{ name: string; email: string }>('user');
    if (storedUser) {
      console.log(storedUser.name); // Outputs: Jane Smith
    }
  }
}

Dieser Ansatz fördert saubereren Code und trennt die Zuständigkeiten, wodurch Ihre Anwendung wartungsfreundlicher wird.

---

Bewährte Verfahren

• Fehlerbehandlung: Fügen Sie immer Try-Catch-Blöcke ein, wenn Sie JSON parsen, um potenzielle Fehler ordnungsgemäß zu behandeln.
• Datenvalidierung: Validieren Sie die aus dem Session Storage abgerufenen Daten, bevor Sie sie verwenden, um unerwartetes Verhalten zu verhindern.
• Sicherheitsüberlegungen: Vermeiden Sie das Speichern sensibler Informationen im Session Storage, da diese über die Entwicklertools des Browsers zugänglich sind.
• Service-Abstraktion: Kapseln Sie die Session Storage-Logik in einem Service, um die Wiederverwendung und Wartbarkeit des Codes zu fördern.

FAQs

Wie speichere ich ein JSON-Objekt im Session Storage in Angular?

Verwenden Sie JSON.stringify(), um das Objekt in einen String zu konvertieren, und verwenden Sie dann sessionStorage.setItem().

Was ist der Vorteil der Verwendung eines Service für Session Storage?

Es fördert sauberen, wiederverwendbaren und wartungsfreundlichen Code über Komponenten hinweg.

Ist Session Storage sicher für sensible Daten?

Nein, er ist über Browsertools zugänglich, vermeiden Sie daher das Speichern vertraulicher Informationen.

Wir sind Leapcell, Ihre erste Wahl für das Hosten von Backend-Projekten.

Leapcell ist die Next-Gen Serverless Plattform für Webhosting, Async Tasks und Redis:

Multi-Language Unterstützung

• Entwickeln Sie mit Node.js, Python, Go oder Rust.

Unbegrenzte Projekte kostenlos bereitstellen

• zahlen Sie nur für die Nutzung – keine Anfragen, keine Gebühren.

Unschlagbare Kosteneffizienz

• Pay-as-you-go ohne Leerlaufgebühren.
• Beispiel: 25 $ unterstützen 6,94 Millionen Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

Optimierte Entwicklererfahrung

• Intuitive Benutzeroberfläche für mühelose Einrichtung.
• Vollautomatische CI/CD-Pipelines und GitOps-Integration.
• Echtzeitmetriken und -protokollierung für umsetzbare Erkenntnisse.

Mühelose Skalierbarkeit und hohe Leistung

• Automatische Skalierung zur einfachen Bewältigung hoher Parallelität.
• Kein operativer Overhead – konzentrieren Sie sich einfach auf das Bauen.

Erfahren Sie mehr in der Dokumentation!

Folgen Sie uns auf X: @LeapcellHQ