cookie

最新推荐文章于 2024-08-09 19:14:14 发布

锦岁

最新推荐文章于 2024-08-09 19:14:14 发布

阅读量268

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_39520640/article/details/104965335

版权

前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

Chrome现在只在设置为“SameSite=None”和“Secure”时才提供带有跨站点请求的cookie。

1、什么是cookie
HTTP协议本身是无状态的。什么是无状态呢，即在服务器端不保留连接的有关信息，服务器无法判断用户身份。
无状态是指Web浏览器与Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后Web服务器返回响应（Response），连接就被关闭了，在服务器端不保留连接的有关信息。也就是说，HTTP请求只能由客户端发起，而服务器不能主动向客户端发送数据。

Cookie实际上是一小段的文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。

打个比方，我们去银行办理储蓄业务，第一次给你办了张银行卡，里面存放了身份证、密码、手机等个人信息。当你下次再来这个银行时，银行机器能识别你的卡，从而能够直接办理业务。

2、 cookie机制
当用户第一次访问并登陆一个网站的时候，cookie的设置以及发送会经历以下4个步骤：
客户端发送一个请求到服务器 --> 服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部 --> 客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部 -->服务器返回响应数据
在这里插入图片描述

Response Headers中包含Set-Cookie头部，而Request Headers中包含了Cookie头部。

3、cookie属性项

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

Expires
该属性用来设置Cookie的有效期。Cookie中的maxAge用来表示该属性，单位为秒。Cookie中通过getMaxAge()和setMaxAge(int maxAge)来读写该属性。maxAge有3种值，分别为正数，负数和0。

如果maxAge属性为正数，则表示该Cookie会在maxAge秒之后自动失效。浏览器会将maxAge为正数的Cookie持久化，即写到对应的Cookie文件中（每个浏览器存储的位置不一致）。无论客户关闭了浏览器还是电脑，只要还在maxAge秒之前，登录网站时该Cookie仍然有效。下面代码中的Cookie信息将永远有效。

 Cookie cookie = new Cookie("mcrwayfun",System.currentTimeMillis()+"");
 // 设置生命周期为MAX_VALUE，永久有效
 cookie.setMaxAge(Integer.MAX_VALUE);//2147483647
 resp.addCookie(cookie);

当maxAge属性为负数，则表示该Cookie只是一个临时Cookie，不会被持久化，仅在本浏览器窗口或者本窗口打开的子窗口中有效，关闭浏览器后该Cookie立即失效。

Cookie cookie = new Cookie("mcrwayfun",System.currentTimeMillis()+"");
 // MaxAge为负数，是一个临时Cookie，不会持久化
cookie.setMaxAge(-1);
 resp.addCookie(cookie);

maxAge设置为负数，能看到Expires属性改变了，但Cookie仍然会存在一段时间直到关闭浏览器或者重新打开浏览器。
在这里插入图片描述

当maxAge为0时，表示立即删除Cookie

Cookie[] cookies = req.getCookies();
Cookie cookie = null;

// get Cookie
for (Cookie ck : cookies) {

	if ("mcrwayfun".equals(ck.getName())) {
         cookie = ck;
         break;
    }
}

if (null != cookie) {
     // 删除一个cookie
     cookie.setMaxAge(0);
     resp.addCookie(cookie);
}

maxAge设置为0表示立即删除该Cookie，如果在debug的模式下，执行上述方法，可以看见cookie立即被删除了。
在这里插入图片描述

4、修改或者删除Cookie
HttpServletResponse提供的Cookie操作只有一个addCookie(Cookie cookie)，所以想要修改Cookie只能使用一个同名的Cookie来覆盖原先的Cookie。如果要删除某个Cookie，则只需要新建一个同名的Cookie，并将maxAge设置为0，并覆盖原来的Cookie即可。

**新建的Cookie，除了value、maxAge之外的属性，比如name、path、domain都必须与原来的一致才能达到修改或者删除的效果。**否则，浏览器将视为两个不同的Cookie不予覆盖。

值得注意的是，从客户端读取Cookie时，包括maxAge在内的其他属性都是不可读的，也不会被提交。浏览器提交Cookie时只会提交name和value属性，maxAge属性只被浏览器用来判断Cookie是否过期，而不能用服务端来判断。

我们无法在服务端通过cookie.getMaxAge()来判断该cookie是否过期，maxAge只是一个只读属性，值永远为-1。当cookie过期时，浏览器在与后台交互时会自动筛选过期cookie，过期了的cookie就不会被携带了。

5、Cookie的域名
Cookie是不可以跨域名的，隐私安全机制禁止网站非法获取其他网站的Cookie。

正常情况下，同一个一级域名下的两个二级域名也不能交互使用Cookie，比如test1.mcrwayfun.com和test2.mcrwayfun.com，因为二者的域名不完全相同。如果想要mcrwayfun.com名下的二级域名都可以使用该Cookie，需要设置Cookie的domain参数为.mcrwayfun.com，这样使用test1.mcrwayfun.com和test2.mcrwayfun.com就能访问同一个cookie

一级域名又称为顶级域名，一般由字符串+后缀组成。熟悉的一级域名有baidu.com，qq.com。com，cn，net等均是常见的后缀。
二级域名是在一级域名下衍生的，比如有个一级域名为mcrfun.com，则blog.mcrfun.com和www.mcrfun.com均是其衍生出来的二级域名。

6、Cookie的路径
path属性决定允许访问Cookie的路径。比如，设置为"/"表示允许所有路径都可以使用Cookie

7、JavaScript操作cookie
JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

创建cookie：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

//创建函数设置cookie
function setCookie(cname,cvalue,exdays)//设置了 cookie 名、cookie 值、cookie过期时间
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
var username="Li Hua";
setCookie("username",username,365);//将用户名存储 365 天

Cookie 以名/值对形式存储，还可以添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除。使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面，设置为"/"表示允许所有路径都可以使用Cookie。

读取 cookie ：

var x = document.cookie;

//创建函数获取cookie
function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}
var username=getCookie("username");

修改 cookie 类似于创建 cookie，用一个同名的Cookie来覆盖原先的Cookie。

删除 cookie 非常简单，与上文第四点相同，只需要设置 expires 参数为以前的时间即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

8、Cookie, LocalStorage 与 SessionStorage异同
1）cookie由服务端生成，用于标识用户身份；而两个storage用于浏览器端缓存数据。
2）一般情况下浏览器端不会修改 cookie，但会频繁操作两个storage。
3）cookie有path概念，子路径可以访问父路径 cookie，父路径不能访问子路径 cookie
4）cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
5）浏览器不能保存超过300个 cookie，单个服务器不能超过20个，每个 cookie不能超过4k。web storage大小支持能达到5M
6）sessionStorage不能共享，localStorage在同源文档之间共享， cookie在同源且符合path规则的文档之间共享
7）如果保存了 cookie的话，http请求中一定会带上；而两个storage可以由脚本选择性的提交
8）安全性方面， cookie中最好不要放置任何明文的东西。两个storage的数据提交后在服务端一定要校验

本文参考：
https://www.jianshu.com/p/6fc9cea6daa2
https://segmentfault.com/a/1190000006822777