在 Angular 中设置 Cookie

1. Angular 中的 Cookie
2. 在 Angular 中设置 Cookie

在本文中，我们将讨论 Angular 中的 cookie。我们将通过示例介绍如何在 Angular 中设置 cookie。

Angular 中的 Cookie

Cookie 是通常由你的浏览器存储的小型详细信息包，并且网站倾向于将 Cookie 用于许多事情。Cookies 在不同的请求中持续存在，浏览器会话应该可以帮助我们设置它们，它们可以成为一些 Web 应用程序中的一种很好的身份验证技术。

我们可以在很多情况下使用 cookie 来存储重要数据，例如用于身份验证或登录时保存用户详细信息。我们可以随时轻松地从 cookie 中检索数据。

通常，我们每个 Web 服务器只能存储 20 个 cookie，每个 cookie 中的数据不超过 4KB，如果我们更愿意确定 max-age 属性，它们可以无限期地保存。

让我们使用以下命令在 Angular 中创建一个新应用程序。

ng new my-app

在 Angular 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。

cd my-app

让我们运行我们的应用程序来检查所有依赖项是否都安装正确。

ng serve --open

我们需要使用库 ngx-cookie-service 在 Angular 中设置 cookie。

在 Angular 中设置 Cookie

Angular 提供了一个库 ngx-cookie-service，可用于在我们的 Web 应用程序中设置 cookie。我们可以使用以下命令轻松安装此库。

npm install ngx-cookie-service --save

此命令将下载并安装我们项目的 node_modules 文件夹中的 ngx-cookie-service 库，它也将包含在依赖项中。

一旦我们成功地将这个库添加到我们的项目中，我们就可以设置 cookie。建议我们在模块文件中导入 CookieService，然后将其添加到我们的提供者的数组中，如下所示。

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

一旦我们将它添加为提供者，我们就可以在我们的 app.component.ts 之一中使用它，如下所示。

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

输出：

演示