在Angular中，描述如何设置，获取和清除cookie？

封面图 • 2025-09-23 • Angular

在 Angular 中，**直接操作 Cookie 并不是推荐的方式**，因为 Angular 本身并不提供内置的 Cookie 操作 API。不过，你可以通过以下几种方式来设置、获取和清除 Cookie：

---

## ✅ 方法一：使用 `document.cookie`（原生 JavaScript）

这是最常见的方式，适用于大多数场景。

### 设置 Cookie

```typescript
document.cookie = "username=JohnDoe; path=/; max-age=3600"; // 有效期为1小时
```

> **注意**：`path=/` 是为了确保 Cookie 在整个网站中可用；`max-age` 是以秒为单位的时间。

### 获取 Cookie

```typescript
function getCookie(name: string): string | null {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) {
    return parts.pop()?.split(';').shift() || null;
  }
  return null;
}

// 使用示例
const username = getCookie('username');
console.log(username);
```

### 清除 Cookie

要清除 Cookie，只需将它的过期时间设为过去的时间：

```typescript
document.cookie = "username=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
```

---

## ✅ 方法二：使用 Angular 的 `@angular/common` 中的 `CookieService`

Angular 提供了一个 `CookieService`，但需要你手动实现或者使用第三方库。

### 使用 `ngx-cookie-service`（推荐）

这是一个流行的第三方库，用于在 Angular 中管理 Cookie。

#### 安装

```bash
npm install ngx-cookie-service
```

#### 导入模块

在 `app.module.ts` 中导入：

```ts
import { NgxCookieService } from 'ngx-cookie-service';

@NgModule({
  imports: [BrowserModule, ...],
  providers: [NgxCookieService],
  ...
})
export class AppModule {}
```

#### 使用方法

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

@Component({
  selector: 'app-root',
  template: `<p>Username: {{ username }}</p>`
})
export class AppComponent {
  username: string;

constructor(private cookieService: CookieService) {
    // 设置 Cookie
    this.cookieService.set('username', 'JohnDoe', 1); // 1天后过期

// 获取 Cookie
    this.username = this.cookieService.get('username');

// 清除 Cookie
    // this.cookieService.delete('username');

// 删除所有 Cookie
    // this.cookieService.getAll();
  }
}
```

---

## ✅ 方法三：使用 `HttpClient` + 后端设置 Cookie（适用于需要安全性的场景）

如果你的应用与后端有交互，可以由后端设置 Cookie（例如通过 `Set-Cookie` 响应头），前端可以通过 `HttpClient` 发送请求并处理响应中的 Cookie。

---

## 📝 总结对比

| 方法 | 是否推荐 | 优点 | 缺点 |
|------|----------|------|------|
| `document.cookie` | ✅ 推荐 | 简单、无需额外依赖 | 需要手动处理解析 |
| `ngx-cookie-service` | ✅ 推荐 | 简洁、易用、功能丰富 | 需要安装第三方库 |
| 后端设置 Cookie | ✅ 推荐 | 安全性高 | 需要后端配合 |

---

## 🛡️ 注意事项

- **安全性**：Cookie 可以被客户端修改，不适合存储敏感信息。
- **HttpOnly**：如果 Cookie 被标记为 `HttpOnly`，则无法通过 `document.cookie` 访问。
- **SameSite**：建议设置 `SameSite=Strict` 或 `Lax` 以防止 CSRF 攻击。

---

如果你有更具体的使用场景（比如是否涉及身份验证、跨域等），我可以进一步帮你优化方案！