详解前端cookie知识

1、简述cookie概念

1.1、使用到cookie技术的原因

• 概念：和http相关的技术——cookie技术
  • http协议是无状态协议
  • 每次的http请求都不会记录http请求发起者的任何信息，在请求发起结束后，服务端只是负责返回响应数据，并不会根据请求信息去记录当前是谁发送的请求，但，这会导致登录状态是没办法被记录的，只要跳转页面，就会导致登录状态的失效
  • 现在的解决方法可以把登录状态放在localStorage中，每次打开页面时都进行记录，但是，早期的浏览器并不支持localStorage，它的解决方案是：通过cookie来进行验证

1.2、cookie的作用

1. cookie是一个以字符串形式存储数据的容器
2. 这个容器是依靠浏览器进行数据存储的，它是存储在本地的，浏览器在哪，cookie就存储在哪里(存在哪个计算机设备上)

1.3、cookie的存储内容

1. cookie相当于一个"身份牌" ，"戴"在了浏览器身上
2. 在发起请求的时候，浏览器会把这个"身份牌"携带过去，服务器去验证身份牌，来查看身份

1.4、cookie的登录流程、前端需要的配置是什么

1. cookie免登录不需要我们进行任何配置
2. 每一个http请求都会在请求头中——默认携带cookie
3. 每一个http响应也都会把cookie携带到浏览器端
4. cookie是可以任意游离在我们的浏览器端和服务器端的
5. 总结：
   • http请求，只要在请求中设置了cookie这个技术，那么cookie就是默认跟随请求和响应的，是不需要有任何其它操作的

1.5、cookie一般由谁设置

1. cookie一般情况下是由服务端来设置的
2. 前端cookie的应用和 "localStorage" 相似，但，因为"localStorage"技术的更新，导致了cookie技术在前端被弃用了

1.6、cookie的特点

1. 存储的类型只能是字符串
2. 存储大小有限制，一般是4KB左右，localStorage不需要在意存储大小的问题
3. 存储数量有限制，一般只能存储50条
4. cookie有时效性，有过期时间限制，默认情况下的cookie是会话级别的cookie(打开浏览器cookie存在，关闭浏览器，它也就被删除了)，同样localStorage不限制
5. cookie有域名限制，必须在同域名、同协议、同端口的情况下才可以进行读取
   • 解释：cookie之前都是存一些身份验证信息的，有点像之前在authorization中设置的token信息
   • 相当于在发送请求的时候，设置cookie就不需要配置authorization了

2、cookie的基本操作

2.1、cookie如何进行赋值

• 注意：
  • 在前端中，所有的cookie操作都基于属性：document.cookie(可读/写)

1. 在进行cookie测试时，必须使用服务器(当前可使用live server)打开当前页面，否则cookie设置不生效！！
2. 设置cookie就是给document.cookie赋值一个符合cookie规则的字符串 => "key=value"
   • 示例： document.cookie = "username=wuyanzu";
3. 查看：
   • 在查看localStorage的下方有一个cookies，即可查看存储的cookie信息
   • 选项卡中的domain代表：cookie有效的作用域(域名)是什么
   • 选项卡中的path代表：当前路径，也就说：当前domain+path下的页面可以访问这条cookie，当然任何页面都是可以的，因为可以跨页面访问数据，这也是为什么之前使用cookie的原因
   • 选项卡中的expires/max-age代表：过期时间，默认值是session(会话cookie)

2.2、cookie的配置信息

1. 使用 "cookie字符串;配置项="配置值 的形式进行配置信息的添加
2. 经常配置的信息就是：过期时间，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>

3. 注意：即使cookie=name相同的情况下，不同path的cookie被浏览器视为两条cookie

2.3、获取cookie

document.cookie = "password=token"; ——获取之前在增加一条cookie

1. document.cookie => 返回所有设置的cookie，但返回值只有cookie的name和value，其余信息一概没有
2. 两条cookie之间的间隔是用 "; "(分号+空格)去进行间隔的—; 是两个字符，开头是分号，后面必须要加空格
3. 拆解获取到的cookie值

// 示例
     let cookie_array = document.cookie.split("; ");
     console.log( document.cookie , cookie_array.map(item=>item.split("="))); 
     // cookie_array.map...是按照"=字符"在拆分中数组 => 变成了数组嵌套数组