Cookie 是 HTTP 协议中的一种机制，可以用来记录用户对网站的访问状态，如登录状态、购物车等。在前端开发中，经常需要使用 Cookie 来实现一些功能，比如实现记住密码功能，实现持久化的购物车等。而使用 jz_ngx-cookie 这个 npm 包，可以方便地操作浏览器的 Cookie。
安装 jz_ngx-cookie
首先，我们需要在项目中安装 jz_ngx-cookie。可以通过如下命令进行安装：
--- ------- ------------- ------
安装完成后，我们可以在项目中的任意文件中引入 jz_ngx-cookie：
------ - ------------- - ---- ----------------
使用 jz_ngx-cookie
使用 jz_ngx-cookie 前，需要注入 CookieService，可以通过构造函数或者注解的方式来注入：
------------------- -------------- -------------- - -
或者：
------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ ---------- --------------- -- ------ ----- ------------ ---------- ------ - -
注入完成后，我们就可以使用 CookieService 来进行 Cookie 的读取、写入和删除了。
写入 Cookie
我们可以使用 CookieService 的 put 方法来写入 Cookie：
----------------------------- ---------
其中，第一个参数是 Cookie 的名称，第二个参数是 Cookie 的值。我们还可以通过第三个参数来设置 Cookie 的过期时间和域名：
----------------------------- -------- - -------- --- ------------------- ------- ------------- ---
读取 Cookie
我们可以使用 CookieService 的 get 方法来读取 Cookie：
----- ----- - ------------------------------
如果 Cookie 不存在，则会返回 null。
删除 Cookie
我们可以使用 CookieService 的 remove 方法来删除 Cookie：
---------------------------------
jz_ngx-cookie 的优势
相比于原生的 document.cookie，jz_ngx-cookie 在以下几个方面具有优势：
1. 支持过期时间
通过第三个参数，可以很方便地设置 Cookie 的过期时间。
2. 支持域名
通过第三个参数，可以很方便地设置 Cookie 的域名。
3. API 简洁明了
jz_ngx-cookie 的 API 简洁明了，易于使用和理解。
4. 支持 Angular 框架
jz_ngx-cookie 与 Angular 框架紧密结合，可以很方便地在 Angular 项目中使用，并享受到 Angular 框架的优点。
示例代码
下面是一个简单的示例代码，演示了如何写入、读取和删除 Cookie：
------ - --------- - ---- ----------------
------ - ------------- - ---- ----------------
------------
--------- -----------
--------- -
------- -------------------------- ---------------
------- ------------------------- ---------------
------- --------------------------- ---------------
---- --------------
------ ----- ----- --
------
--
--
------ ----- ------------ -
------ -------
------------------- -------------- -------------- - -
------------- -
----------------------------- -------- - -------- --- ------------------- ------- ------------- ---
-
------------ -
---------- - ------------------------------
-
-------------- -
---------------------------------
-
-在上面的代码中，我们在组件中定义了三个按钮，分别用于写入、读取和删除 Cookie。在写入 Cookie 时，我们设置了过期时间和域名。在读取 Cookie 时，如果 Cookie 存在，就将其值赋给了组件中的 value 变量。在删除 Cookie 时，我们直接将 key 的 Cookie 删除。最终，如果 value 存在，就展示 Cookie 的值。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005584281e8991b448d575d