Angular で Cookie を設定する

1. Angular の Cookie
2. Angular で Cookie を設定する

この記事では、Angular での Cookie について説明します。Angular で Cookie を設定する方法を例を挙げて紹介します。

Angular の Cookie

Cookie は、通常ブラウザによって保存される詳細の小さなパッケージであり、Web サイトはさまざまな目的で Cookie を利用する傾向があります。Cookie はさまざまなリクエスト間で存続し、ブラウザセッションはそれらを設定するのに役立つはずであり、一部の Web アプリでの認証のための優れた手法になる可能性があります。

Cookie を使用して、認証やログイン時のユーザー詳細の保存など、さまざまな状況で重要なデータを保存できます。必要なときにいつでも Cookie からデータを簡単に取得できます。

通常、Web サーバーごとに保存できる Cookie は 20 個で、各 Cookie に保存できるデータは 4KB 以下です。max-age 属性を決定したい場合は、それらを無期限に保持できます。

次のコマンドを使用して、Angular で新しいアプリケーションを作成しましょう。

ng new my-app

Angular で新しいアプリケーションを作成したら、このコマンドを使用してアプリケーションディレクトリに移動します。

cd my-app

アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

ng serve --open

ライブラリ ngx-cookie-service を使用して Angular で Cookie を設定する必要があります。

Angular で Cookie を設定する

Angular は、Web アプリケーションで Cookie を設定するために使用できるライブラリ ngx-cookie-service を提供します。このライブラリは、次のコマンドを使用して簡単にインストールできます。

npm install ngx-cookie-service --save

このコマンドは、ngx-cookie-service ライブラリをプロジェクトの node_modules フォルダにダウンロードしてインストールし、依存関係にも含まれます。

このライブラリをプロジェクトに正常に追加したら、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 の 1つで使用できます。

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

出力：

デモ