如何在Angular中借助ngx-cookie-service实现cookies存储图片并跨组件获取

注意：浏览器对单条Cookie的大小限制普遍为4KB，仅适合存储极小的图标、缩略图类资源，大尺寸图片不建议采用该方案，会导致请求头臃肿、性能下降甚至触发请求异常。

1. 图片转Base64后存入Cookie #

Cookie仅支持存储字符串格式内容，因此需要先将图片资源转为Base64编码，再调用ngx-cookie-service的方法存储：

• 图片转Base64参考代码：

// 绑定input type="file"的change事件，用户选中图片后执行
handleImgSelect(event: Event): void {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = () => {
    const imgBase64 = reader.result as string;
    // 调用ngx-cookie-service存储，第三个参数可设置过期时间
    this.cookieService.set('stored_img', imgBase64, 1); // 示例为1天过期
  };
  reader.readAsDataURL(file);
}

注意：存储前可先判断Base64字符串长度，超过3KB就不建议存入Cookie，避免超出大小限制

2. 其他组件获取Cookie中的图片并渲染 #

直接调用ngx-cookie-service的get方法取出Base64字符串，直接绑定到img标签的src属性即可：

// 组件初始化时获取
imgSrc: string | null = null;
ngOnInit(): void {
  this.imgSrc = this.cookieService.get('stored_img') || null;
}

对应模板代码：

<img *ngIf="imgSrc" [src]="imgSrc" alt="存储的图片">

• Base64编码会比原图片体积大33%左右，存储前务必确认大小符合Cookie限制
• Cookie会跟随每一次HTTP请求发送到服务端，敏感图片请勿采用该方式存储，避免信息泄露
• 如果需要存储大尺寸图片，更推荐使用localStorage、sessionStorage或者IndexedDB方案

内容的提问来源于stack exchange，提问作者Mirza Rizwan