1、简述cookie概念
1.1、使用到cookie技术的原因
概念
:和http
相关的技术——cookie技术
http协议
是无状态协议
每次的http请求
都不会记录http请求发起者
的任何信息,在请求发起结束后,服务端
只是负责返回响应数据,并不会根据请求信息去记录当前是谁发送的请求,但,这会导致登录状态是没办法被记录的,只要跳转页面,就会导致登录状态的失效现在的解决方法可以把登录状态
放在localStorage
中,每次打开页面时都进行记录,但是,早期的浏览器并不支持localStorage
,它的解决方案是:通过cookie
来进行验证 1.2、cookie的作用
cookie
是一个以字符串形式
存储数据的容器
这个容器
是依靠浏览器
进行数据存储的,它是存储在本地的,浏览器
在哪,cookie
就存储在哪里(存在哪个计算机设备上) 1.3、cookie的存储内容
cookie
相当于一个"身份牌"
,"戴"在了浏览器
身上在发起请求的时候,浏览器
会把这个"身份牌"
携带过去,服务器
去验证身份牌
,来查看身份 1.4、cookie的登录流程、前端需要的配置是什么
cookie免登录
不需要我们进行任何配置每一个http请求
都会在请求头
中——默认携带cookie
每一个http响应
也都会把cookie
携带到浏览器端
cookie
是可以任意游离在我们的浏览器端
和服务器端
的总结
: http请求,只要在请求中设置了cookie这个技术,那么cookie就是默认跟随请求和响应的,是不需要有任何其它操作的 1.5、cookie一般由谁设置
cookie
一般情况下是由服务端
来设置的前端cookie
的应用和 "localStorage"
相似,但,因为"localStorage"
技术的更新,导致了cookie技术
在前端被弃用了 1.6、cookie的特点
存储的类型只能是字符串
存储大小有限制
,一般是4KB左右,localStorage
不需要在意存储大小的问题存储数量有限制
,一般只能存储50条cookie有时效性
,有过期时间限制,默认情况下的cookie
是会话级别的cookie
(打开浏览器cookie存在,关闭浏览器,它也就被删除了),同样localStorage
不限制cookie有域名限制
,必须在同域名、同协议、同端口的情况下才可以进行读取 解释:cookie
之前都是存一些身份验证
信息的,有点像之前在authorization
中设置的token
信息相当于在发送请求的时候,设置cookie
就不需要配置authorization
了 2、cookie的基本操作
2.1、cookie如何进行赋值
注意: 在前端中,所有的cookie操作
都基于属性:document.cookie
(可读/写) 在进行cookie测试
时,必须使用服务器
(当前可使用live server)打开当前页面,否则cookie设置不生效!!设置cookie
就是给document.cookie
赋值一个符合cookie规则
的字符串
=> "key=value"
示例: document.cookie = "username=wuyanzu";
查看: 在查看localStorage
的下方有一个cookies
,即可查看存储的cookie信息选项卡中的domain
代表:cookie
有效的作用域(域名)
是什么选项卡中的path
代表:当前路径
,也就说:当前domain+path
下的页面可以访问这条cookie
,当然任何页面都是可以的,因为可以跨页面访问数据,这也是为什么之前使用cookie
的原因选项卡中的expires/max-age
代表:过期时间
,默认值是session(会话cookie) 2.2、cookie的配置信息
使用 "cookie字符串;配置项="配置值 的形式进行配置信息的添加经常配置的信息就是:过期时间,domain没有必要配置,path可以看情况配置 配置cookie过期时间的时候,需要使用日期对象需要把日期对象调整到目标时间,然后进行cookie日期设置直接把日期对象拼接到字符串中,拼接过程中:浏览器会把日期对象转换成字符串后再进行拼接,所以我们拼接得到的结果还是字符串过期时间的配置属性:expires<script>// 示例1: let d = new Date(); // 1、创建当前的日期对象 d.setDate( d.getDate() + 5 ); // 2、给d这个日期对象设置一个新日期,新日期是d原来的日期加上5天后的结果 document.cookie = "username=wuyanzu;expires=" + d ;// 3、拼接在字符串中,在查看时效性时,已经从默认值换成了5天后 // 示例2:同时配置过期时间和path信息 let d = new Date(); d.setDate( d.getDate() + 5 ); document.cookie = "username=wuyanzu;expires=" + d + ";path=/"; /* 注意:/的意思是只要在当前的协议域名端口下(http:协议 //127.0.0.1ip地址 :5500端口)的所有页面都可以去访问到这条 cookie信息,如果不加/,则只能在"js学习"文件夹下访问,其它文件夹是不让访问的 */</script>
注意:即使cookie=name
相同的情况下,不同path
的cookie
被浏览器
视为两条cookie
2.3、获取cookie
document.cookie = "password=token"
; ——获取之前在增加一条cookie
document.cookie
=> 返回所有设置的cookie,但返回值只有cookie的name和value,其余信息一概没有两条cookie
之间的间隔是用 "; "(分号+空格)
去进行间隔的—;
是两个字符,开头是分号
,后面必须要加空格
拆解获取到的cookie值
// 示例 let cookie_array = document.cookie.split("; "); console.log( document.cookie , cookie_array.map(item=>item.split("="))); // cookie_array.map...是按照"=字符"在拆分中数组 => 变成了数组嵌套数组