Sitzungsspeicherung in Angular

Wir lernen etwas über sessionStorage und wie man bestimmte Daten in sessionStorage in Angular speichert, erhält, löscht oder alle Daten löscht.

Sitzungsspeicherung in Angular

sessionStorage hält für die Dauer der Seitensitzung einen separaten Speicherbereich für jeden angegebenen Ursprung bereit. sessionStorage wird geleert, wenn die Registerkarte oder das Fenster geschlossen wird.

Daten speichern mit sessionStorage

Um Daten in sessionStorage zu speichern, erstellen wir eine Funktion saveData() in der Datei app.component.ts.

# angular
saveData(){

}

Innerhalb der Funktion saveData verwenden wir setItem, um den Namen im sessionStorage zu speichern.

# angular
saveData() {
    sessionStorage.setItem('name', 'Rana Hasnain');
}

Unsere Funktion zum Speichern von Daten in sessionStorage ist abgeschlossen.

Wir müssen unsere Datei app.component.html bearbeiten und eine Schaltfläche mit dem Ereignis click zur Funktion saveData() hinzufügen. Unser Code in app.component.html sieht also wie folgt aus.

# angular
<hello name="{{ name }}"></hello>
<button (click)="saveData()">Save Data in Session Storage</button>

Ausgabe:

Wenn wir auf die Schaltfläche klicken, werden Daten im sessionStorage mit dem key des name gespeichert.

Ausgabe:

Daten aus dem sessionStorage abrufen

Wir werden besprechen, wie Sie die gespeicherten Daten im sessionStorage erhalten und anzeigen können.

Wir erstellen eine getData()-Funktion in app.component.ts.

# angular
getData(){
    
  }

Innerhalb der Funktion getData() verwenden wir getItem, um unsere gewünschten Daten basierend auf key aus dem sessionStorage zu erhalten.

# angular
getData(){
    return sessionStorage.getItem('name');
  }

Wir sind jetzt mit unserer Funktion fertig und müssen die Daten anzeigen, die wir von der Funktion getData() erhalten haben.

Wir bearbeiten app.component.html und ersetzen das name-Attribut des hello-Tags. Unser Code in app.component.html sieht also wie folgt aus.

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()">Save Data in Session Storage</button>

Ausgabe:

Löschen bestimmter Daten aus dem sessionStorage

Wir werden das Löschen spezifischer Daten basierend auf dem key aus dem sessionStorage bei einem Klick auf die Schaltfläche besprechen.

Zuerst erstellen wir die Funktion removeData() in der app.component.ts.

# angular
removeData(){
    
  }

Wir werden das removeItem verwenden, um spezifische Daten aus dem sessionStorage basierend auf key zu entfernen. Wir werden auch einige zusätzliche Daten im sessionStorage hinzufügen, die wir für dieses Beispiel entfernen können.

Unser Code in app.component.ts sieht wie folgt aus.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Session Storage in Angular 12 By Husnain';
  name = 'Angular ' + VERSION.major;

  saveData() {
    sessionStorage.setItem('name', 'Rana Hasnain');
    sessionStorage.setItem('location', 'Pakistan');
  }
  getData() {
    return sessionStorage.getItem('name');
  }
  removeData() {
    sessionStorage.removeItem('location');
  }
}

Im obigen Code haben wir zusätzliche Daten mit der Position key im sessionStorage hinzugefügt, die beim Klicken auf die Schaltfläche entfernt werden.

Wir müssen eine Schaltfläche in app.component.html erstellen, die unsere Funktion removeData() aufruft. app.component.html sieht also so aus.

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>

Wir werden auch Schaltflächen so gestalten, dass sie besser aussehen, und den folgenden Code in die app.component.css einfügen.

# angular
p {
  font-family: Lato;
}
.btn{
  margin-right: 15px;
  padding: 10px 15px;
  background-color: blueviolet;
  color: white;
  border: none;
  border-radius: 5px;
}

Ausgabe:

Wir klicken auf die Schaltfläche Save Data, um den Speicherort sessionStorage zu speichern. Danach klicken wir auf die Schaltfläche Remove Location, um Standortdaten aus sessionStorage zu entfernen.

Alle Daten aus dem sessionStorage löschen

Wir besprechen das Löschen aller Daten aus dem sessionStorage in Angular.

Wir erstellen die Funktion deleteData() in der app.component.ts.

# angular
deleteData(){

  }

Mit clear löschen wir alle Daten aus sessionStorage. Unser Code sieht also wie folgt aus.

# angular
deleteData(){
    sessionStorage.clear();
  }

Wir müssen eine Schaltfläche in app.component.html erstellen, um die Funktion deleteData() aufzurufen. Unser Code sieht also wie folgt aus.

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>
<button (click)="deleteData()" class="btn">Clear All</button>

Ausgabe:

Endergebnis:

Unsere Dateien werden am Ende wie unten aussehen.

app.component.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Session Storage in Angular 12 By Husnain';
  name = 'Angular ' + VERSION.major;

  saveData() {
    sessionStorage.setItem('name', 'Rana Hasnain');
    sessionStorage.setItem('location', 'Pakistan');
  }
  getData() {
    return sessionStorage.getItem('name');
  }
  removeData() {
    sessionStorage.removeItem('location');
  }
  deleteData() {
    sessionStorage.clear();
  }
}

app.component.html:

# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>
<button (click)="deleteData()" class="btn">Clear All</button>

app.component.css:

# angular
p {
  font-family: Lato;
}
.btn {
  margin-right: 15px;
  padding: 10px 15px;
  background-color: blueviolet;
  color: white;
  border: none;
  border-radius: 5px;
}