cookie 的使用和回顾。
cookie 的使用日常工作中很少了,记录下前端经常使用的 Cookie 三部曲使用介绍及代码
文章目录
Cookie 设置
通过 JS 的 document.cookie 设置与当前页面相关的 cookie 信息,格式为键值对。
Cookie 读取
通过 JS 的 documen.cookie 获取到当前网页所有相关的 cookie 的 name 和 value,以正则匹配到要获取的 cookie value
Cookie 删除
前端不存在直接删除 cookie 的方法,只能通过设置 cookie 的 Expires 属性为一个已经过去的时间或者设置 Max-Age 属性设置为 0,从而使 cookie 失效,然后被浏览器给清除掉。
let Cookie = {
// 读取
get(name) {
let arr,
reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if ((arr = document.cookie.match(reg))) return decodeURI(arr[2]);
else return null;
},
// 设置
set(name, value, expires = 30) {
let Days = expires;
let exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie =
name + "=" + encodeURI(value) + ";expires=" + exp?.toString();
},
// 删除
del(name) {
let exp = new Date();
exp.setTime(exp.getTime() - 1);
let cval = this.get(name);
if (cval !== null) document.cookie = name + "=;path=/;max-age=0";
},
};
使用如下图:
控制台查看
本地 html 文件直接打开调试 cookie 问题
- 直接调试上述功能发现的 bug,一开始浑然不知 cookie 只能存储服务器的页面上的数据,使用 vscode 作为开发工具,它不像 webstorm 一样打开页面就是 localhost:8080 之类的地址,而是文件路径的地址,类似于这样:file:///E:/html/cookie.html 的。
- 如果你使用 vscode 开发调试 cookie 首先要解决的就是启动本地服务器,那么下面就是详细的步骤:
npm install http-server -g
下载完后,在项目目录打开终端输入
http-server .\html\
启动后会给你个本地服务的地址,进入http://127.0.0.1:8080/cookie.html页面可以进行调试,就可以看到cookie的读写记录。
cookie 简介
Cookie 是服务器发送到用户浏览器并保存在本地的一组键值对格式的数据,不同浏览器对 Cookie 的数量和大小限制不同,但一般来说,单域名下设置的 cookie 不能超过 30 个,单条 cookie 的大小不能超过 4kb。如果 Cookie 超出浏览器限制,则会被浏览器忽略,不被保存。而且 Cookie 可以设置过期时间,到达过期时间后,浏览器就会把 Cookie 清除掉。
cookie 两种方式
- 服务端通过在 HTTP 响应头中的 Set-Cookie 字段设置。
- 前端通过 JS 的 document.cookie 设置。
在浏览器在拥有 Cookie 之后,每次向服务器发送请求时,都会自动携带对应地址的 Cookie。但是用户可以手动操作浏览器接受、拒绝和删除 Cookie,以及是否向服务器发送 Cookie
cookie 两种类型
- 会话期 Cookie,会话期 Cookie 不设置具体失效时间,会话结束之后,会被删除掉。被存储在内存中,当会话关闭时,该 Cookie 永久丢失。
- 持久性 Cookie。持久性 Cookie 会设置好具体的有效期,被存储在磁盘中,浏览器关闭不会影响该 Cookie,只有当有效期结束时,才会从磁盘中将该 Cookie 删除。在有效期内,会一直复用该 Cookie。
cookie 常用属性
field | deacription |
---|---|
Name | Cookie 的标识符,用于在客户端和服务器之间传递数据 |
Value | 与 Cookie 关联的值,可以是任何字符串 |
Domain | 指定可以访问 Cookie 的域名。如果未设置,则默认为创建 Cookie 的网页的域名 |
Path | 指定可以访问 Cookie 的路径。如果未设置,则默认为创建 Cookie 的网页所在的路径 |
Expires | 指定 Cookie 的过期时间,也就是 Cookie 将被自动删除的时间点。如果未设置,则表示该 Cookie 在用户关闭浏览器时被删除 |
Secure | 如果设置了该标志,表示该 Cookie 只能通过加密协议(如 HTTPS)传输 |
HttpOnly | 如果设置了该标志,那么该 Cookie 只能通过 HTTP 协议传输,而不能通过 JavaScript 等脚本语言来访问。这有助于防止跨站点脚本攻击(XSS) |
参考文档
有疑问的同学可以私信我、对帮助到同学欢迎大家收藏评论。