# @freelancercom/ngx-cookie 中文文档

规范地址：https://npmcn.com/package/%40freelancercom/ngx-cookie/

版本：6\.0\.0-fork\.1
npm 元数据更新时间：2026-02-16T19:06:08.763Z
中文译文更新时间：2026-11-15T13:06:01.050Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40freelancercom/ngx-cookie
原文对照：https://npmcn.com/package/%40freelancercom/ngx-cookie/?lang=original
项目主页：https://github.com/salemdar/ngx-cookie#readme
源码仓库：https://github.com/freelancer/ngx-cookie

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：132 kB，27 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/core \>=12\.0\.0，@angular/common \>=12\.0\.0
- 首次发布：2022-06-20T14:32:27.020Z
- 最新版本发布：2022-06-20T14:32:27.354Z
- 近 30 天下载量：5810（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

向Angular提供1.x美元cookies服务

## 安装

```sh
npm install @freelancercom/ngx-cookie
```

也可以使用：`pnpm add @freelancercom/ngx-cookie`、`yarn add @freelancercom/ngx-cookie`、`bun add @freelancercom/ngx-cookie`

## README

# ngx-cookie (英语) [![CI](https://github.com/salemdar/ngx-cookie/workflows/CI/badge.svg)](https://github.com/salemdar/ngx-cookie/actions?query=workflow%3ACI) [![npm version](https://img.shields.io/npm/v/ngx-cookie.svg)](https://www.npmjs.com/package/ngx-cookie) [![Downloads](http://img.shields.io/npm/dm/ngx-cookie.svg)](https://npmjs.org/package/ngx-cookie)

> 向Angular提供1.x美元cookies服务

## 目录 :

-   [开始](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-get-started)
    -   [安装](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-installation)
    -   [使用量](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-usage)
    -   [服务器侧面渲染](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-ssr)
    -   [实例](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-examples)
-   [饼干服务](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-cookieservice)
    -   [获取()](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-get)
    -   [获取对象( )](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-getobject)
    -   [获取全部( E)](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-getall)
    -   [设置( )](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-put)
    -   [设置对象( )](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-putobject)
    -   [删除( )](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-remove)
    -   [删除全部( C)](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-removeall)
-   [选项](https://npmcn.com/package/%40freelancercom/ngx-cookie/#readme-options)

## 开始

### 安装

您可以用 npm 在本地安装此软件包 .

```bash
# To get the latest stable version and update package.json file:
yarn add ngx-cookie
# or
# npm install ngx-cookie --save
```

### 使用量

`CookieModule` 应在角模组中注册 `withOptions()` 静态方法. 这些方法接受 `CookieOptions` 物体也一样。 留空为缺省.

```typescript
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { CookieModule } from 'ngx-cookie';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [ BrowserModule, CookieModule.withOptions() ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

```typescript
import { Component } from '@angular/core';
import { CookieService } from 'ngx-cookie';

@Component({
    selector: 'my-very-cool-app',
    template: '<h1>My Angular App with Cookies</h1>'
})

export class AppComponent { 
  constructor(private cookieService: CookieService){}
  
  getCookie(key: string){
    return this.cookieService.get(key);
  }
}
```

### 服务器侧面渲染

`ngx-cookie` 支持服务器侧面渲染(SSR / Angular Universal)期间的用法. 首次设置服务器侧面渲染本身可能很棘手,并不属于本指南的范围. 在这里,我们将假设 你有一个工作 SSR 设置类似 [角力通用启动器项目](https://github.com/angular/universal-starter),你只是想获得 `ngx-cookie` 与SSR合作.

注:在正常客户端使用时, `ngx-cookie` 操作附在其中的客户端 cookie `document` 对象。 在安全部门改革期间, `ngx-cookie` 将操作 http 请求或响应头中的 cookie 。

#### 设置

安装 `ngx-cookie-backend` 库 :

```shell
yarn add ngx-cookie-backend
# or
# npm install ngx-cookie-backend --save
```

然后编辑 `app.server.module.ts` 添加 `CookieBackendModule.withOptions()` 进口量:

```typescript
/* app.server.module.ts */

import { CookieBackendModule } from 'ngx-cookie';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    CookieBackendModule.withOptions()
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}
```

接下来,我们需要让供应商 `'REQUEST'` 财务报告和审定财务报表 `'RESPONSE'` sSR期间由快取服务器创建的对象。 要做到这一点,请编辑 `server.ts` 创建提供者 `'REQUEST'` 和 `'RESPONSE'`。 。 。 .

```typescript
/* server.ts */
// All regular routes use the Universal engine
server.get('*', (req, res) => {
  res.render(indexHtml, {
    req,
    res,
    providers: [
      {provide: APP_BASE_HREF, useValue: req.baseUrl},
      {provide: REQUEST, useValue: req},
      {provide: RESPONSE, useValue: res}
    ]
  });
});
```

就这样! 你申请的所有电话 `CookieService` 现在应该正常工作 在安全部门改革期间!

### 实例

一般使用示例如下 `projects/test-app`

安全部门改革使用实例列于下 `projects/backend-test-app`

## 饼干服务

现有7种方法 `CookieService` (6个标准方法来自 **角 1** 和1个额外 `removeAll()` 方便方法)

### 获取()

返回给定 cookie 键的值 .

```typescript
/**
 * @param {string} key Id to use for lookup.
 * @returns {string} Raw cookie value.
 */
get(key: string): string;
```

### 获取对象( )

返回给定 cookie 键的去序列化值 .

```typescript
/**
 * @param {string} key Id to use for lookup.
 * @returns {Object} Deserialized cookie value.
 */
getObject(key: string): Object;
```

### 获取全部( E)

与所有 cookie 一起返回密钥值对象 .

```typescript
/**
 * @returns {Object} All cookies
 */
getAll(): any;
```

### 设置( )

设置给定的 cookie 密钥的值.

```typescript
/**
 * @param {string} key Id for the `value`.
 * @param {string} value Raw value to be stored.
 * @param {CookieOptions} options (Optional) Options object.
 */
put(key: string, value: string, options?: CookieOptions): void;
```

### 设置对象( )

序列化并设定给定饼干密钥的值 .

```typescript
/**
 * @param {string} key Id for the `value`.
 * @param {Object} value Value to be stored.
 * @param {CookieOptions} options (Optional) Options object.
 */
putObject(key: string, value: Object, options?: CookieOptions): void;
```

### 删除( )

删除给定的饼干 .

```typescript
/**
 * @param {string} key Id of the key-value pair to delete.
 * @param {CookieOptions} options (Optional) Options object.
 */
remove(key: string, options?: CookieOptions): void;
```

### 删除全部( C)

拿掉所有的饼干.

```typescript
/**
 */
removeAll(): void;
```

## 选项

选项对象应为类型 `CookieOptions` 接口。 该对象可能具有以下属性:

-   **路径** - \[弦声\] - 饼干只能用于此路径及其子路径. 默认情况下, 这是您中显示的 URL `<base>` 标签.
-   **域名** - \[弦声\] - 该 cookie 仅可用于此域及其子域. 出于安全原因,如果当前域不是此域的子域或与其等同,用户代理将不接受该cookie.
-   **过期** - {string Date} - 字符串“Wdy, DD Mon YYYY HH:MM:SS GMT”或表示准确日期/时间的日期对象.
-   **安全** - 狦 `true`,则饼干只能通过安全连接提供.
-   **同块** - {"Lax""Strett""None"} - 指定饼干,用于第一方(Lax-Q)或第三方上下文.
-   **仅限 httply** - 狦 `true`,然后饼干将与 `HttpOnly` 旗帜,并且只能从远程服务器访问。 有助于防止XSS攻击.
-   **存储未编码** - 狦 `true`,那么饼干值将不会被编码,并将按规定被存储.

## 常见问题

### @freelancercom/ngx-cookie 是什么？

向Angular提供1\.x美元cookies服务

### 如何安装 @freelancercom/ngx-cookie？

在项目目录运行 npm install @freelancercom/ngx-cookie，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（\>=12\.0\.0）、@angular/common（\>=12\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @freelancercom/ngx-cookie 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @freelancercom/ngx-cookie 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @freelancercom/ngx-cookie 可以商用吗？

@freelancercom/ngx-cookie 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @freelancercom/ngx-cookie 的下载量有多少？

根据 npm 官方下载统计，@freelancercom/ngx-cookie 在 2026/10/16 – 2026/11/14 这 30 天内被下载 5,810 次，日均约 194 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @freelancercom/ngx-cookie 还在维护吗？

最新版本 6\.0\.0-fork\.1 发布于 2022/06/20（4 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/06/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。