Establecer cookie en Angular

1. Cookies en Angular
2. Establecer cookies en Angular

En este artículo, discutiremos las cookies en Angular. Presentaremos cómo configurar cookies en Angular con ejemplos.

Cookies en Angular

Las cookies son pequeños paquetes de detalles que normalmente almacena su navegador, y los sitios web tienden a utilizar cookies para muchas cosas. Las cookies persisten en diferentes solicitudes, y las sesiones del navegador deberían ayudarnos a configurarlas, y pueden ser una técnica excelente para la autenticación en algunas aplicaciones web.

Podemos usar cookies para almacenar los datos importantes en muchas situaciones, como para la autenticación o para guardar los detalles del usuario cuando inicia sesión. Podemos recuperar fácilmente los datos de las cookies cuando queramos.

Generalmente, solo podemos almacenar 20 cookies por servidor web y no más de 4KB de datos en cada cookie, y pueden durar indefinidamente si preferimos determinar el atributo max-age.

Vamos a crear una nueva aplicación en Angular usando el siguiente comando.

ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos a nuestro directorio de aplicaciones usando este comando.

cd my-app

Ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

ng serve --open

Necesitamos configurar las cookies en Angular usando una biblioteca ngx-cookie-service.

Establecer cookies en Angular

Angular proporciona una biblioteca ngx-cookie-service que se puede usar para configurar cookies en nuestra aplicación web. Podemos instalar fácilmente esta biblioteca usando el siguiente comando.

npm install ngx-cookie-service --save

Este comando descargará e instalará la biblioteca ngx-cookie-service en la carpeta node_modules de nuestro proyecto, y también se incluirá en las dependencias.

Una vez que hayamos agregado con éxito esta biblioteca a nuestro proyecto, podemos configurar las cookies. Se sugiere que importemos el CookieService dentro de nuestro archivo de módulo y luego lo agreguemos a la matriz de nuestro proveedor, como se muestra a continuación.

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 {}

Una vez que lo hemos agregado como proveedor, podemos usarlo en uno de nuestros app.component.ts, como se muestra a continuación.

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);
  }
}

Producción:

Manifestación