在前端开发中，cookie 是一种非常常见的存储和传输数据的方式。虽然浏览器本身提供了 document.cookie API 来完成基础的 cookie 操作，但是在实际开发过程中，我们通常会使用第三方库来简化 cookie 的管理。其中，ngx-cookies 是一款轻量级的、用于 Angular 应用中的 cookie 库，能够很方便地进行 cookie 存储、读取、删除等操作。本文将介绍 ngx-cookies 的使用方法，以及一些常见应用场景。
安装 ngx-cookies
在使用 ngx-cookies 之前，首先需要在项目中安装该依赖库。可以通过 npm 安装，如下：
$ npm install ngx-cookies --save
在安装完成后，需要在 Angular 应用的 app.module.ts 中引入依赖库，示例如下：
-- -------------------- ---- -------
------ - ---------------- - ---- --------------
-----------
------------- ------
-------- -
----
--------------------------
--
---------- ------
---------- -----
--
------ ----- --------- - -使用 ngx-cookies
写入 cookie
写入 cookie 可以通过如下代码实现：
import { CookieService } from 'ngx-cookies';
constructor(private cookieService:CookieService){}
...
this.cookieService.put("cookieName", "cookieValue");其中，put 方法接收两个参数：cookie 名称和 cookie 值。通过该方法写入的 cookie，会在浏览器中存储，直到过期或者被删除。
读取 cookie
读取 cookie 可以通过如下代码实现：
import { CookieService } from 'ngx-cookies';
constructor(private cookieService:CookieService){}
...
let cookieValue = this.cookieService.get("cookieNaeme");其中，get 方法接收一个参数：cookie 名称。如果该名称对应的 cookie 存在，则返回 cookie 的值；否则返回 null。
删除 cookie
除了等待 cookie 过期外，我们还可以通过代码手动删除 cookie。删除 cookie 可以通过如下代码实现：
import { CookieService } from 'ngx-cookies';
constructor(private cookieService:CookieService){}
...
this.cookieService.remove("cookieName");其中，remove 方法接收一个参数：cookie 名称。如果该名称对应的 cookie 存在，则将其删除。
设置 cookie 的过期时间
默认情况下，通过 ngx-cookies 写入的 cookie 是会话级别的，即只在用户当前访问有效，浏览器关闭后即失效。如果需要让 cookie 在一定时间后失效，需要对 cookie 的过期时间进行设置。设置 cookie 过期时间可以通过 put 方法的第四个参数来实现。例如，我们将 cookie 的过期时间设置为 7 天，代码如下：
let expireTime = new Date();
expireTime.setDate(expireTime.getDate() + 7);
this.cookieService.put("cookieName", "cookieValue", {expires:expireTime});常见应用场景
记住密码
在登录页面中，我们通常会提供“记住我”的功能，该功能即可以通过向浏览器写入 cookie 实现。初始化登录页面时，我们需要根据用户上一次是否选择了“记住我”，来设置登录页面的状态：
-- -------------------- ---- -------
------------------- ---------------------------- -----
--- -------- - -----------------------------------
--- -------- - -----------------------------------
--- ---------- - -------------------------------------
----------- -- ----------
------------- - ---------
------------- - ---------
-
------------- --- --------
--------------- - -----
-
-在用户登录成功后，如果用户选择了“记住我”，则需要将用户名、密码以及“记住我”的标记写入 cookie，以便下次打开登录页面时恢复这些信息：
-- -------------------- ---- ------- -------------------- ---------------------------------- --------------- ---------------------------------- --------------- ------------------------------------ -------- ------ -------------------------------------- -------------------------------------- ---------------------------------------- -
多语言切换
在一些网站中，我们需要提供多语言的支持。如果用户第一次访问网站时选择了某种语言，我们可以通过 cookie 记录用户的选择，以便下次用户访问网站时自动使用相应的语言。代码如下：
-- -------------------- ---- -------
------------------- ---------------------------- -----
--- ---- - -------------------------------
---------
--------------------------------
------
--------------------------------
-
-
-----------------
------------------------------ ------
--------------------------------
-结语
ngx-cookies 是一款非常方便的 cookie 库，可以帮助我们完成 cookie 的存储、读取、删除等操作，并且可以方便地设置 cookie 的过期时间。在实际开发过程中，我们可以通过 ngx-cookies 实现一些常见的应用场景，例如记住密码、多语言切换等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558d281e8991b448d6200