web-dev-qa-db-ja.com

Angular 6でCookieを作成する方法は?

Angular 6でCookieを作成する方法AngularJSの場合、Angular 6.でCookieを作成する最良の方法はngcookieです。

35
Akshay Sharma

このノードパッケージを使用できます

ngx-cookie-service

28
Rajani Kanth
  1. npm install ngx-cookie-service --save
  2. モジュールに追加:import { CookieService } from 'ngx-cookie-service';
  3. CookieServiceをモジュールのプロバイダーに追加します。
  4. それをコンストラクタに注入します。
  5. 特定のCookieを取得するにはcookie.get(nameOfCookie)を使用し、新しいCookieを追加するにはcookie.set(nameOfCookie,cookieValue)を使用します。
55
M.Laida

まず最初に、あなた自身に尋ねるべきです: "本当にクッキーが必要ですか?"

Cookieは、かつて一般的なクライアント側のストレージに使用されていました。クライアントにデータを保存する唯一の方法である場合、これは正当でしたが、最近のストレージAPIを好むことが現在推奨されています。 Cookieはリクエストごとに送信されるため、パフォーマンスが低下する可能性があります(特にモバイルデータ接続の場合)。クライアントストレージ用の最新のAPIは、WebストレージAPI(localStorageおよびsessionStorage)とIndexedDBです。 (出典:MDN

したがって、まだお持ちでない場合は、代わりに Web Storage API についてお読みください。

クッキーを続行したい場合は、先をお読みください。

ngx-cookie-serviceを試しましたが、うまくいきませんでした。私は問題ごとに問題があり、最終的にgithubで議論し、パッケージを更新しようとしました。 Cookieの取得/設定はすべてネイティブJavaScriptであるため、必要なものがそれほど複雑である必要はないことを理解するのに約1日かかりました。

無駄にする時間はもうなかったので、この簡単なCookieServiceを自分で書きました。そして、私はそれを他の絶望的な開発者と共有したかっただけです。 :)

シンプルなCookieService

私はこれを作成しました Gist 、これはngx-cookie-serviceの軽量の代替です。

セットアップと使用

もちろん、app.module.tsファイルに登録する必要があります。プロバイダーのリストに追加します:

providers: [FooService, BarService, CookieService]

次に、コンポーネントで使用します。次のように:

private _sessionId: string;

constructor(private cookieService: CookieService) {
  this._sessionId = cookieService.get("sessionId");
}

public set sessionId(value: string) {
  this._sessionId = value;
  this.cookieService.set("sessionId", value);
}

デバッグツールを使用して、Cookieが実際に設定されていることを確認し、後続のHTTP要求に存在することを確認できることに注意してください。 (Chromeのスクリーンショットですが、FirefoxとEdgeは同様の概要を持っています)

cookie is set

using cookie

25
bvdb

現在は:npm install ngx-cookie --save

Doc: https://github.com/salemdar/ngx-cookie

0
Jessica Rocha