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

輸出：

演示