前端cookie详解

2023-12-16 11:59| 来源: 网络整理| 查看: 265

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,表示在2022年1月26日13: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才能访问。

【本文地址】

公司简介

联系我们