Cookie 是 HTTP 协议中的一种机制，可以用来记录用户对网站的访问状态，如登录状态、购物车等。在前端开发中，经常需要使用 Cookie 来实现一些功能，比如实现记住密码功能，实现持久化的购物车等。而使用 jz_ngx-cookie 这个 npm 包，可以方便地操作浏览器的 Cookie。
安装 jz_ngx-cookie
首先，我们需要在项目中安装 jz_ngx-cookie。可以通过如下命令进行安装：
npm install jz_ngx-cookie --save
安装完成后，我们可以在项目中的任意文件中引入 jz_ngx-cookie：
import { CookieService } from 'jz_ngx-cookie';使用 jz_ngx-cookie
使用 jz_ngx-cookie 前，需要注入 CookieService，可以通过构造函数或者注解的方式来注入：
constructor(private cookieService: CookieService) { }或者：
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [CookieService]
})
export class AppComponent implements OnInit { }注入完成后，我们就可以使用 CookieService 来进行 Cookie 的读取、写入和删除了。
写入 Cookie
我们可以使用 CookieService 的 put 方法来写入 Cookie：
this.cookieService.put('key', 'value');其中，第一个参数是 Cookie 的名称，第二个参数是 Cookie 的值。我们还可以通过第三个参数来设置 Cookie 的过期时间和域名：
this.cookieService.put('key', 'value', { expires: new Date('2022-01-01'), domain: 'example.com' });读取 Cookie
我们可以使用 CookieService 的 get 方法来读取 Cookie：
const value = this.cookieService.get('key');如果 Cookie 不存在，则会返回 null。
删除 Cookie
我们可以使用 CookieService 的 remove 方法来删除 Cookie：
this.cookieService.remove('key');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