Setze Cookie in Angular

1. Cookies in Angular
2. Setzen Sie Cookies in Angular

In diesem Artikel werden wir Cookies in Angular besprechen. Wir stellen Ihnen anhand von Beispielen vor, wie Sie Cookies in Angular einrichten.

Cookies in Angular

Cookies sind kleine Datenpakete, die normalerweise von Ihrem Browser gespeichert werden, und Websites neigen dazu, Cookies für zahlreiche Zwecke zu verwenden. Cookies bleiben über verschiedene Anfragen hinweg bestehen, und Browsersitzungen sollten uns dabei helfen, sie zu setzen, und sie können eine ausgezeichnete Technik für die Authentifizierung in einigen Web-Apps sein.

Wir können Cookies verwenden, um die wichtigen Daten in vielen Situationen zu speichern, z. B. zur Authentifizierung oder zum Speichern von Benutzerdaten, wenn Sie angemeldet sind. Wir können Daten von Cookies jederzeit abrufen.

Im Allgemeinen können wir nur 20 Cookies pro Webserver und nicht mehr als 4KB an Daten in jedem Cookie speichern, und sie können auf unbestimmte Zeit dauern, wenn wir es vorziehen, das Attribut max-age zu bestimmen.

Lassen Sie uns eine neue Anwendung in Angular erstellen, indem Sie den folgenden Befehl verwenden.

ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

cd my-app

Lassen Sie uns unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

ng serve --open

Wir müssen die Cookies in Angular mithilfe einer Bibliothek ngx-cookie-service setzen.

Setzen Sie Cookies in Angular

Angular stellt eine Bibliothek ngx-cookie-service zur Verfügung, mit der Cookies in unserer Webanwendung gesetzt werden können. Wir können diese Bibliothek einfach mit dem folgenden Befehl installieren.

npm install ngx-cookie-service --save

Dieser Befehl lädt die Bibliothek ngx-cookie-service herunter und installiert sie im Ordner node_modules unseres Projekts, und sie wird auch in die Abhängigkeiten aufgenommen.

Sobald wir diese Bibliothek erfolgreich zu unserem Projekt hinzugefügt haben, können wir Cookies einrichten. Es wird vorgeschlagen, dass wir den CookieService in unsere Moduldatei importieren und ihn dann wie unten gezeigt zum Array unseres Anbieters hinzufügen.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CookieService } from 'ngx-cookie-service';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [CookieService],
})
export class AppModule {}

Sobald wir es als Anbieter hinzugefügt haben, können wir es in einer unserer app.component.ts verwenden, wie unten gezeigt.

import { Component } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private cookieService: CookieService) {}
  ngOnInit() {
    this.cookieService.set('Test', 'Hasnain');
  }

  getCookie() {
    const value: string = this.cookieService.get('Test');
    console.log(value);
  }
}

Ausgabe:

Demo