请说说在Angular中怎样设置、获取和清除cookie?

news/2025/1/11 13:50:50/文章来源:https://www.cnblogs.com/ai888/p/18665533

在Angular中,原生的Angular库并不直接提供设置、获取和清除cookie的功能。但是,你可以使用一些第三方的库,如ngx-cookie-service,或者通过JavaScript的原生方法来操作cookie。

使用JavaScript原生方法

  1. 设置Cookie

你可以使用document.cookie来设置cookie,如下所示:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

这将创建一个名为username,值为John Doe的cookie,该cookie在2023年12月18日过期,并且对整个网站(/路径)都可用。
2. 获取Cookie

要获取一个cookie的值,你可以编写一个函数来解析document.cookie字符串,如下所示:

function getCookie(name) {const value = `; ${document.cookie}`;const parts = value.split(`; ${name}=`);if (parts.length === 2) return parts.pop().split(';').shift();return null;
}const username = getCookie("username");
console.log(username); // 输出: John Doe
  1. 清除Cookie

要清除一个cookie,你可以设置它的过期日期为一个过去的时间,如下所示:

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

这将使名为username的cookie立即过期,从而被浏览器清除。

如果你更喜欢使用Angular的方式,你可以安装并使用ngx-cookie-service库。这个库提供了一些方便的方法来设置、获取和清除cookie。

  1. 安装

首先,你需要使用npm或yarn来安装这个库:

npm install ngx-cookie-service --save
# 或者
yarn add ngx-cookie-service
  1. 导入并使用

在你的Angular模块中(通常是app.module.ts),你需要导入CookieService并将其添加到providers数组中:

import { CookieService } from 'ngx-cookie-service';@NgModule({// ...providers: [CookieService],// ...
})
export class AppModule { }

然后,在你的组件或服务中,你可以注入CookieService并使用它的方法来设置、获取和清除cookie:

import { CookieService } from 'ngx-cookie-service';@Component({// ...
})
export class MyComponent {constructor(private cookieService: CookieService) { }setCookie() {this.cookieService.set('username', 'John Doe', 10, '/', null, null, 'Lax');}getCookie() {const username = this.cookieService.get('username');console.log(username); // 输出: John Doe}clearCookie() {this.cookieService.delete('username', '/');}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/867734.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s AI

1. RDMA ROCE 网卡 2. GPU插件device-plugin 3. gpu 虚拟化 4. volcano 调度 5. 网络选型cillum时来天地皆同力,运去英雄不自由

msys2 + vscode + C++

MSYS2 is a collection of tools and libraries providing you with an easy-to-use environment for building, installing and running native Windows software. msys2在windows上提供了类似linux的构建环境,可以方便地安装开发所需的各种库文件。网址为https://www.msys2.…

Lec 10 线程

Lec 10 线程 License 本内容版权归上海交通大学并行与分布式系统研究所所有 使用者可以将全部或部分本内容免费用于非商业用途 使用者在使用全部或部分本内容时请注明来源 资料来自上海交通大学并行与分布式系统研究所+材料名字 对于不遵守此声明或者其他违法使用本内容者,将依…

2024-12-10-json

Json在pox.xml中添加如下依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.78</version> </dependency> 添加上述依赖后可用…

AtCoder Beginner Contest 387

A - Happy New Year 2025 题意给定正整数\(A,B\),求\((A+B)^2\)思路模拟代码点击查看代码 #include <bits/stdc++.h> using namespace std; #define int long long typedef pair<int, int> pii;const int mxn = 1e6 + 5;void solve() {int a, b;cin >> a &g…

班迪录屏电脑软件 Bandicam v8.0.1.2512 绿色便携解锁版

点击上方蓝字睿共享资源关注我 前言 Bandicam绿色便携版是一个很棒的视频录制软件,被很多人认为是世界上最好的三个视频录制工具之一。它的好处在于,即使你的电脑配置不是很高,或者你的电脑已经用了很多年,它都能运行得很顺畅。而且,当你用它来录制视频时,声音和画面会完…

摘樱桃II

摘樱桃II “作为一个合格的程序员,理应具有修bug修到凌晨4点的魄力” 戳我查看原题。 题目大意给定一个矩阵,矩阵中的每个数代表该点的樱桃个数。Robot1、Robot2分别从左上角与右上角出发,每次只能选择向正下方、左下方、右下方三个方向移动去采摘樱桃,到达矩阵的最后一行终…

colab上传压缩包文件,出现Unexpected end of archive问题?

Unexpected end of archive,上传图片数据集压缩包到colab上,使用命令进行解压,出现EOF错误,为啥呢?

BurpSuite实操之定序器功能使用

定序器的使用 BurpSuite的定序器是一款用于检测数据样本随机性质量的工具,通常用于检测访问令牌(sessiontoken)是否可预测、密码重置令牌是否可预测等场景,通过Sequencer的数据样本分析,能很好地降低这些关键数据被伪造的风险。操作:令牌保存到本地后查看: 我们看到token每…

G74【模板】拉格朗日插值法

视频链接:G74【模板】拉格朗日插值法_哔哩哔哩_bilibili P4781 【模板】拉格朗日插值 - 洛谷 | 计算机科学教育新生态// 拉格朗日插值法 O(n^2) #include <iostream> #include <cstring> #include <algorithm> using namespace std;#define LL long long …

【web安全】面向Web安全防护的蜜罐技术研究

摘 要 传统Web安全防护技术存在误报、漏报以及防御被动等问题,蜜罐技术的引入可有效改善此状况。本文针对面向Web安全防护的蜜罐技术进行研究,分析当前主流的Web蜜罐技术,提出蜜罐技术在Web安全防护中的应用模型,并进行了研究展望。 一、引言 随着Web2.0的发展,越来越多的…