当前位置:首页 » 《我的小黑屋》 » 正文

详解前端cookie知识

10 人参与  2024年09月24日 19:20  分类 : 《我的小黑屋》  评论

点击全文阅读


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相同的情况下,不同pathcookie浏览器视为两条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...是按照"=字符"在拆分中数组 => 变成了数组嵌套数组

点击全文阅读


本文链接:http://zhangshiyu.com/post/164165.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1