前端cookie详解

article/2025/11/9 0:45:47
cookie在前端还是比较总重要的,接下来将总结一下cookie知识点。
将从以下方面去聊一聊cookie。
1、什么样的数据适合放到cookie中。
2、cookie是如何设置的。
3、cookie如何进行携带传送给服务器的。
4、cookie如何实现删除的。

1、什么样的数据适合存放在cookie中?

我们在详细了解这个问题之前,需要先了解cookie是如何工作的?
cookie是存放在浏览器中的,在每一个浏览器安装目录下,都存在一个文件夹,存放
着不同域下对应的cookie。当浏览器通过http请求某一个域时,此时浏览器就会将
该域下面的cookie自动放入request header中。我们需要注意,浏览器自动帮我们
携带,此时如果很多无关紧要的数据都存放在cookie中,都会随着请求发送给后台,
这样就无形当中增加了网络开销。此时我们再想想什么数据在每一次都需要?其实我
们的身份认证信息在每一次都需要携带,所以存放在cookie的数据最合适的是身份认
证信息,其他信息都不合适。
在localStorage出现之前,cookie一直背开发者所滥用,导致很多的无关紧要的数
据被请求携带到服务器。cookie也存在一些限制,每一个域下的cookie最多是4KB,
每一个域下的cookie最多存在20条。

2、cookie的格式

我们在控制台打印document.cookie就可以拿到当前域下面的全部可以访问的
cookie了(也就是非httpOnly的cookie),注意观察的cookie,是由key=value的形
式组成,并且在每一个key,value之间使用分号和空格隔开。

在这里插入图片描述

3、cookie的属性选项

我们使用cookie肯定需要设置一些属性,存在这些属性就可以知道cookie的过期时
间,发送到那个域名和发送到哪个路径。cookie的属性包
括:expires,domain,path,secure,httpOnly。在设置这些属性的时候也是需要
按照格式设置的。如下所示。每一个属性后面需要跟一个分号和空格。
"key=name; expires=Thu, 25 Feb 2016 04:18:00 GMT; domain=ppsc.sankuai.com; path=/; secure; HttpOnly"

3.1、expires属性

expires属性表示的是:cookie的过期时间,使用GMT表示,可以使用
toUTCString()或者使用toGMTString()来获取。
console.log(new Date().toUTCString())  //Wed, 26 Jan 2022 13:14:47 GMT
console.log(new Date().toGMTString())  //Wed, 26 Jan 2022 13:14:47 GMT
expires=Wed, 26 Jan 2022 13:14:47 GMT,表示在202212613:14分之
后失效。如果在新增cookie的时候,没有增加expires属性,则表示会话阶段,也就
是在浏览器关闭时,cookie就消失。expires是在http1.0中的属性,在http1.1中
新增了max-age,max-age表示从当前创建开始,到cookie过期的时间。max-age可
以为三个值,一个是负值,0,正值。当max-age为负值时,表示cookie为会话阶
段。当max-age为0时,表示删除cookie。当cookie的值为正数时,则
expires=max-age + 当前时间。

3.2、domain和url

domain表示域名,url表示路径。两者结合起来表示当浏览器向某一个域名和路径发
送http请求时,需要携带符合域名和路径条件的cookie。
什么是符合条件的域名和路径条件呢?
例如domain设置为"baidu.com",url设置为"/",当浏览器访问域名
为"api.baidu.com"或者"baidu.com"的时候携带cookie,当url为"/"或者
为"/home"..均携带cookie。
这里需要注意的是xhr请求默认不会携带cookie的。

3.3、secure

secure是保证网络请求安全的,也就是说如果设置cookie为secure,则发送的请求
必须是https的。如果是http的请求,即使域名一样,也不会从浏览器携带到服务
器。但是不携带并不代表没有,我们在浏览器上却可以查看到。

3.4、httpOnly

我们在设置cookie的时候,默认httpOnly为空。如果某条cookie设置了
httpOnly,则就是js不能构操作该条cookie(查看,修改,删除)。那么为什么有的cookie存在httpOnly,则有的cookie则不存在httpOnly呢?
原因为:如果在某一个用户登录过的网站,其cookie没有设置httpOnly,则当用户
受到xss攻击(跨站脚本攻击)的时候,也就是向该网站注入一段js脚本,如果这个脚
本读取的是用户的cookie,并且将该cookie发送给攻击者,则用户信息泄露,攻击
者可以拿到该用户登录信息模拟用户登录,造成用户不安全。

4、如何设置cookie

设置cookie存在前端设置和后端设置。

4.1、服务器设置cookie

当我们发送ajax请求的时候,服务器返回的请求头(response header),在
response header中存在set-cookie字段,我们可以通过返回set-cookie向浏览
器返回cookie数据。每一个set-cookie只能设置一个cookie。并且服务端可以设
置的属性有expires,domain,path,secure,httpOnly。具体如图所示。

在这里插入图片描述
4.2、客户端设置cookie

在控制台执行下面代码(cookie的其余属性没有设置,则设为默认值)
document.cookie = "name=ssss"

在这里插入图片描述

在客户端设置cookie的时候,并不是全部的属性都可以设置,可以设置的属性
有:expires,domain,url,secure(这个在https协议的网站中才能设置成功),
httpOnly在客户端不能设置。

5、设置多个cookie
在这里插入图片描述
在这里插入图片描述

上图设置多个cookIe,最终只能设置成功一个。如果想要在客户端设置多个,使用如下代码。
document.cookie ="name=dl; "
document.cookie ="age=20; "
document.cookie ="sex=man; "

6、修改和删除cookie

1、修改:直接进行赋新值,不过必须保证domain/url属性不变,如果改变则直接新增一个。
2、删除:直接赋新值,不过必须保证domain/url属性不变,并且将expires的时间设置为过去的时间。

7、补充内容

1、在cookie中只有key/domain/path都相同时,才能进行覆盖。
2、在设置domain的value设置多个点,则任何子域名都可以访问。
如不不设置点,则只有该domain才能访问。

http://chatgpt.dhexx.cn/article/Vrym4Yvt.shtml

相关文章

必背前端八股文

前端八股文 看到一篇特别好的前端八股文,强力推荐 🔥 连八股文都不懂还指望在前端混下去么 - 掘金 (juejin.cn)https://juejin.cn/post/7016593221815910408

纯前端导出表格

前端 excel 表格导出 我们习惯了后端去处理表格,直接接口返回 ,那前端如何轻松的导出表格呢? 文章目录 前端 excel 表格导出Ⅰ. 通过 js-xlsx ⭐⭐⭐⭐⭐安装① vue2 中使用② vue3 中使用③ react 中使用 Ⅲ. 通过 vue-json-excel ⭐⭐安装…

jquery form表单序列化注意事项

我们先来讲讲表单中 中readonly和disabled的区别: readonly只对input和textarea有效, 但是disabled对于所以的表单元素都是有效的,包括radio,checkbox等 如果表单中使用的disabled那么用户是不能选择的,也就是说这个文本框是无法获取到焦点…

jQuery实现表单序列化反序列化

js序列化反序列化参考: https://blog.csdn.net/zqtsx/article/details/17299087 涉及知识点:序列化:var serializeJson JSON.stringify($("#fiveLevelIndexForm").serializeArray());反序列化: var json $.parseJSO…

JQuery表单序列化

方式一&#xff1a;serialize() <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></sc…

自动阅读脚本源码

如题,提供源码也可以提供技术支持 以下是界面截图和部分脚本源码 使用按键精灵手机版开发的,目前支持十多个主流平台 以下是少量源码截图 有疑问可以加V:848312526

自动阅读,这些坑你都知道吗?

我应该选择一个怎样的脚本&#xff1f; 现在市面上什么样的脚本都有&#xff0c;有免费的&#xff0c;有10块钱的&#xff0c;什么脚本都有。如果你只是想玩玩而已&#xff0c;那你大可随意选择。如果你想要长期稳定的使用&#xff0c;那你就要把眼睛睁大&#xff01;&#xf…

自动阅读专业版第六次更新

源代码下载地址&#xff1a;https://pan.baidu.com/s/1WvhpA-9fhSJOqdVUX6E7jw 提取码&#xff1a;w301 原贴&#xff1a;https://blog.csdn.net/zy0412326/article/details/106297472 第一次更新贴&#xff1a;https://blog.csdn.net/zy0412326/article/details/106421444 …

autojs自动阅读脚本源代码免费分享

autojs上一篇文章讲过了&#xff0c;这篇来实践一下。 一、工具下载安装 手机端&#xff1a;auto.js&#xff08;百度即可&#xff09; PC端&#xff1a; VS Code JDK SDK Tools&#xff08;定位工具: Uiautomatorviewer&#xff09; 注&#xff1a; VS Code 用于代…

Adobe Acrobat Pro DC 2022:专业高效的PDF阅读和编辑利器!

Adobe Acrobat Pro DC 2022是一款功能强大的PDF阅读和编辑软件&#xff0c;是Adobe公司的旗舰产品之一&#xff0c;广泛应用于商业、教育、行政和政府等领域。该软件具有众多高级功能&#xff0c;能够满足各种高级用户的需求。 首先&#xff0c;Adobe Acrobat Pro DC 2022能够快…

畅想阅读自动翻页

畅想阅读自动翻页JavaScript实现 打开相应的阅读书籍通过检查&#xff0c;查找下一页的类名通过F12调出控制台&#xff0c;点击此按钮 然后点击下一页按钮&#xff0c;会出现下面的结果, 选择class里的类名在console中输入以下代码 setInterval(function(){document.getEleme…

博客自动增加阅读量

博客自动增加阅读量 目的步骤准备条件编写基础类注意解决后续 目的 用HttpClient包进行Get请求&#xff0c;从而增加博客的阅读量 步骤 1 拿到所有博客的URL&#xff1a; 我们的博客都是 https://blog.csdn.net/用户ID/article/details/ 文章ID&#xff08;8位&#xff09; …

实现自动阅读的功能

var start document.getElementsByTagName(div)[0]; var stop document.getElementsByTagName(div)[1]; var speed document.getElementsByTagName(div)[2]; var timer 0; var num 10; //多次点击start按钮会产生多个定时器&#xff08;加锁——操作系统学过&#xff09; …

PDF如何自动滚动阅读

PDF如何自动滚动阅读 视图---页面显示---自动滚动 快捷键 Ctrl shiftH

html 自动阅读,自动阅读软件脚本

自动阅读软件脚本是一款非常实用的帮助大家可以自动阅读挂机的软件&#xff0c;生活中多种场景下都可以使用这款软件快速完成任务&#xff0c;自动阅读、自动点赞评论以及刷视频等等的功能一应俱全&#xff0c;支持多个平台上的自阅服务满足大家的需求&#xff0c;想要了解这款…

自动阅读教程--五条app

下面介绍实现五条自动阅读的步骤。&#xff08;只介绍android手机的情况&#xff09; 一、手机连接电脑 首先用usb线将手机连接到电脑上&#xff0c;然后开始菜单中&#xff0c;cmd打开控制台&#xff0c;输入adb devices&#xff0c;会出现如下页面&#xff1a; 这是要记住…

【新】CSDN文章一键打印、输出PDF(自动阅读全文、全清爽模式)

版权声明&#xff1a;本文为丨匿名用户丨原创文章&#xff0c;转载请注明出处&#xff1a;【新】CSDN文章一键打印、输出PDF&#xff08;自动阅读全文、全清爽模式&#xff09;_丨晋丨-CSDN博客_csdn打印https://blog.csdn.net/p1279030826/article/details/106602341 该方法在…

自动阅读专业版

APK链接&#xff1a;https://pan.baidu.com/s/1TH52xDhDS0GX7fOnwh9Ghw 提取码&#xff1a;tpkr 专业版可以自动阅读&#xff1a; "微视", "快音", "快7浏览器", "天天爱清理", "趣铃声", "火火视频极速版", &q…

最近网络上很多都在聊自动阅读,今天我们好好说说自动阅读到底怎么样

一、首先要先看自身适不适合做阅读。 能不能做首先要先看你手上有没有资源,什么资源?人!为什么这么说?真正想做阅读的人,他首先碰到最棘手的事就是,我想搞100台机子,一台机子就要1个微信,那我就要准备100个微信可以给我用,这么多,天呐,要哪里来?还有流量问题要怎么…

自动阅读是骗人的吗?新手一定要看,避免入坑

从17年开始&#xff0c;市面上陆陆续续出现了自动阅读工作室&#xff0c;他们又是靠什么赚钱呢&#xff1f;自动阅读真的可以赚钱吗&#xff1f;一天能赚多少呢&#xff1f;做自动阅读违法吗&#xff1f;这些以为估计是很多人会考虑的&#xff01; 首先给大家说下&#xff0c;自…