Как создать куки в Angular 6?

Как создать куки в Angular 6, для AngularJS есть ngcookie, что является лучшим способом создания файлов cookie в Angular 6.

Ответы

Ответ 2

  1. npm install ngx-cookie-service --save
  2. Добавьте в свой модуль: import { CookieService } from 'ngx-cookie-service';
  3. Добавьте CookieService к поставщикам модулей.
  4. Введите его в свой конструктор.
  5. Используйте cookie.get(nameOfCookie) для получения определенного cookie, используйте cookie.set(nameOfCookie,cookieValue) для добавления нового cookie.

Ответ 3

Прежде всего, вы должны спросить себя: "Мне действительно нужны куки?" :

Когда-то куки использовались для общего хранения на стороне клиента. Хотя это было законно, когда они были единственным способом хранения данных на клиенте, в настоящее время рекомендуется отдавать предпочтение современным API хранения. Файлы cookie отправляются при каждом запросе, поэтому они могут ухудшить производительность (особенно для мобильных соединений для передачи данных). Современные API для клиентского хранилища - это API веб-хранилища (localStorage и sessionStorage) и IndexedDB. (Источник: MDN)

Поэтому, если вы этого еще не сделали, вы можете вместо этого прочитать об API веб-хранилища.

Если вы хотите продолжить с куки, пожалуйста, читайте дальше.

Я попробовал ngx-cookie-service и у меня это не сработало. У меня была проблема за проблемой, в итоге я обсуждал ее на github, пытался обновить пакеты. Мне потребовалось около дня, чтобы осознать, что все, что мне нужно, не должно быть таким сложным, ведь получение/настройка файлов cookie - это просто нативная вещь на JavaScript.

У меня больше не было времени терять, и я сам написал этот простой CookieService. И я просто хотел поделиться этим с другими отчаянными разработчиками. :)

Простой CookieService

Я создал эту суть, которая является легкой альтернативой 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