详解 cookie(待补充)

前言:

本来是学习跨域的问题,结果看到一篇文章时,提到了cookie,工作这么多年,可是自己却无法进行述说.说明自己的学习是无效的,费尔曼学习技巧,只想去弄懂他.

1.什么是cookie,cookie的作用

2.cookie的工作机制,即cookie是运行流程

3.cookie的基本属性(4个),如何去使用cookie

一.什么是cookie

http协议本身是无状态的,什么是无状态呢,即服务器无法判断用户身份,cookie实质是一小段的文本信息(key=value格式各个cookie之间一般用";"隔开,即键值对格式)

问题:既然服务器无法判断用户身份,那么又是如何来判断用户的状态呢?  (这里对应cookie机制)

第一步:客户端向服务器发起请求,如果服务器需要记录该用户状态,就使用response(响应)向客户端浏览器颁发一个cookie.

第二步:客户端浏览器会把cookie保存起来.

第三步:当浏览器再请求网站时,浏览器会把请求的网址连同该cookie一同提交给服务器.服务器检查该cookie,以此来辨认用户状态

故事说明:例如我们去办银行卡,里面存放了身份证,密码等信息,等下次来银行时,银行机器就能识别你的卡,从而可以办理业务.

二.cookie机制

当用户第一次访问并登陆一个网站的时候,cookie的设置以及发送会经历以下4个步骤:

1.客户端发送一个请求到服务器

2.服务器发送一个HttpResponse响应到客户端,其中包含Set-Cookie的头部

3.客户端保存cookie,之后想服务器发送请求时,HttpRequest请求中会包含一个cookie的头部

4.服务器返回响应数据

三.cookie的属性项

属性项	属性项介绍
NAME=VALUE	键值对，可以设置要保存的 Key/Value，注意这里的 NAME 不能和其他属性项的名字一样
Expires	过期时间，在设置的某个时间点后该 Cookie 就会失效
Domain	生成该 Cookie 的域名，如 domain="www.baidu.com"
Path	该 Cookie 是在当前的哪个路径下生成的，如 path=/wp-admin/
Secure	如果设置了这个属性，那么只会在 SSH 连接时才会回传该 Cookie

以上内容来源:https://www.jianshu.com/p/6fc9cea6daa2

 

以上是基本的介绍.因为来源讲了后台的cookie,并没有完全了解,这里后续会根据自己的知识去待补充

 

 

 

四.cookie的基本结构

cookie是以键值对的形式保存的,即key=value的格式,cookie之间以";"分隔

 

四.场景预设:

在一个流程操作中,由A页面跳转到B页面,若在A页面中采用js用变量temp保存了某一变量值,在B页面时,同样要使用js来引用temp的变量值,对于js中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,没有达到保存的效果,解决整个问题的最好的方案是采用cookie来保存该变量的值,那如何设置和读取cookie呢?

 

 

4.1 js设置cookie

 

场景:假设在A页面中保存变量username的值("jack")到cookie中,key值为name,则相应的js代码为:

document.cookie = "name="+username;

提点:

cookie的本质是一小段的文本信息,采用key=value格式.

cookie是依附在document对象上的

 

4.2 js读取cookie

场景: 在B页面中获取变量username的值得js代码如下:

假设cookie中存储的内容为:name=jack;password=123
let username = document.cookie.split(";")[0].split("=")[1];　　

提点:

cookie的本质是一小段的文本信息,采用key=value格式.

cookie是依附在document对象上的

 

重点:cookie是运行在客户端的,所以可以用js来设置cookie.

扩展: 

1/ session是运行在服务器端的.

2/cookie是运行在客户端的,所以可以用js来设置cooie

 

常见写入和读取cookie的语句 ,后面有分析

说明:这里为什么有两种语法呢,因为document.cookie无法被写入和读取,猜测是语句问题,但是并不是语法问题.
//   function setCookie(name, value) {
      //     var Days = 30;
      //     var exp = new Date();
      //     exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
      //     document.cookie =
      //       name +
      //       "=" +
      //       escape(value) +
      //       ";expires=" +
      //       //   exp.toGMTString() +
      //       exp.toUTCString() +
      //       ";HttpOnly=false";
      //   }

      //   function getCookie(name) {
      //     var arr,
      //       reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

      //     if ((arr = document.cookie.match(reg))) return unescape(arr[2]);
      //     else return null;
      //   }

      //   setCookie("name", "hayden");
      //   console.log(getCookie("name"));
      var Cookie = {
        set: function (key, val, expiresDays) {
          if (expiresDays) {
            var date = new Date();
            date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000);
            var expiresStr = "expires=" + date.toUTCString() + ":";
          } else {
            var expiresStr = "";
          }

          document.cookie = key + "=" + escape(val) + ";" + expiresStr;
        },
        get: function (key) {
          var getCookie = document.cookie.replace(/[ ]/g, "");
          var resArr = getCookie.split(";");
          var res;
          for (var i = 0, len = resArr.length; i < len; i++) {
            var arr = resArr[i].split("=");
            if (arr[0] == key) {
              res = arr[1];
              break;
            }
          }
          return unescape(res);
        },
      };
      Cookie.set("name", "123", 30);
      console.log(Cookie.get());　　

 

document.cookie无法写入读取分析

1/谷歌浏览器现在版本不支持,与httponly属性有关

    试验过在document.cookie="httponly=false" // 可惜没有效果

2/查资料,cookie的读写目前已知的只有火狐浏览器可以.

 

为什么不让documnet.cookie进行写入与读取

1/可以防止xss攻击

 

未来可能遇到的问题

谷歌浏览器接口请求cookie突然无法携带的问题 来源:https://blog.csdn.net/weixin_43990297/article/details/107716124?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

最近突然遇到一个奇怪的事情，公司的一个后台项目，突然在自己浏览器上无法登陆，查看接口发现是接口没有携带cookie，但是换个浏览器就可以，比如火狐，别人的电脑在谷歌上却能登陆，这个问题可把我搞蒙了，找了一圈资料，终于发现一篇有用的。
首先如果你用axios，那么先设置withCredentials为true，
然后打开谷歌浏览器在Chrome中访问chrome://flags/，搜索SameSite并设置为disabled即可。
原因是Chrome升级到80版本之后cookie的SameSite属性默认值由None变为Lax，这也就造成了一些访问跨域cookie无法携带的问题。

解决方案除了上述手动设置，也可以上后台伙伴去设置响应头中set-cookie中的SameSite值，好像还有其他的一些参数，具体需要后台支持，后台伙伴看这里传送门

再者就是将cookie中携带的参数用请求头啊或者其他方式传递。