Speichern Daten in Angular Local Storage

Wir werden vorstellen, wie man Daten im lokalen Speicher in Angular speichert.

Lokale Speicherung in Angular

Lokale Speicherung ist eine Möglichkeit, Daten auf dem Computer des Clients mithilfe von Schlüssel-Wert-Paaren in einem Webbrowser zu speichern. Das Beste am lokalen Speicher ist, dass es kein Ablaufdatum für die im lokalen Speicher gespeicherten Daten gibt, aber wir können sie jederzeit mit der Funktion clear() löschen.

Nun, um zu verstehen, wie wir Daten einfach mit Schlüssel-Wert-Paaren im lokalen Speicher in Angular speichern können. Zuerst erstellen wir eine Funktion storeName(), die den Namen im lokalen Speicher speichert.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  key: string = 'Name';
  myItem: string;
  storeName() {
    localStorage.setItem(this.key, 'Angular');
    this.myItem = localStorage.getItem(this.key);
  }
}

Jetzt erstellen wir eine Vorlage in der Datei app.component.html. Wir erstellen eine Schaltfläche zum Speichern von Daten im lokalen Speicher, wenn der Benutzer darauf klickt.

#  angular
<button (click)="storeName()">Click to store name</button>

Lassen Sie uns nun überprüfen, wie unsere Anwendung jetzt funktioniert.

Als wir im obigen Beispiel auf die Schaltfläche geklickt haben, wurde der Name mithilfe von Schlüssel-Wert-Paaren im lokalen Speicher gespeichert.

Wir werden im nächsten Schritt das Löschen dieser Daten aus dem lokalen Speicher besprechen. Denn wenn wir sensible Daten im lokalen Speicher speichern, können sie leicht zugänglich sein. Daher ist es besser, die sensiblen Daten zu löschen, nachdem der Bedarf erfüllt ist.

Es gibt zwei Möglichkeiten, die Daten aus dem lokalen Speicher zu löschen. Wir können entweder einen Schlüssel verwenden, um bestimmte Daten zu löschen, oder alle gespeicherten Daten im lokalen Speicher löschen.

Wir werden besprechen, wie nur bestimmte Daten aus dem lokalen Speicher gelöscht werden.

# angular
SpecificDelete() {
    localStorage.removeItem('Name');
  }

Wir werden eine Schaltfläche mit der Aktion onClick in app.component.html hinzufügen.

# angular
<button (click)="SpecificDelete()">Delete Name</button>

Lassen Sie uns überprüfen, wie unsere Anwendung jetzt funktioniert.

Wenn wir im obigen Beispiel auf die Schaltfläche Delete Name klicken, werden nur Daten mit dem Schlüssel Name gelöscht.

Lassen Sie uns eine weitere Funktion erstellen, um alle Daten aus dem lokalen Speicher in Angular zu löschen.

# angular
deleteName() {
    localStorage.clear();
  }

Lassen Sie uns einen Button in der Vorlage mit der Methode onClick erstellen.

# angular
<button (click)="deleteName()">Delete All Data</button>

Lassen Sie uns überprüfen, wie unsere Anwendung jetzt funktioniert.

Wenn wir im obigen Beispiel auf die Schaltfläche Delete All Data klicken, werden alle Daten aus dem lokalen Speicher gelöscht.