前端开发中cookie使用

1、什么样的数据适合存放在cookie中?

我们在详细了解这个问题之前，需要先了解cookie是如何工作的？
cookie是存放在浏览器中的，在每一个浏览器安装目录下，都存在一个文件夹，存放着不同域下对应的cookie。当浏览器通过http请求某一个域时，此时浏览器就会将
该域下面的cookie自动放入request header中。我们需要注意，浏览器自动帮我们携带，此时如果很多无关紧要的数据都存放在cookie中，都会随着请求发送给后台，
这样就无形当中增加了网络开销。此时我们再想想什么数据在每一次都需要?其实我们的身份认证信息在每一次都需要携带，所以存放在cookie的数据最合适的是身份认
证信息，其他信息都不合适。

在localStorage出现之前，cookie一直背开发者所滥用，导致很多的无关紧要的数据被请求携带到服务器。cookie也存在一些限制，每一个域下的cookie最多是4KB,
每一个域下的cookie最多存在20条。

2、cookie的格式

我们在控制台打印document.cookie就可以拿到当前域下面的全部可以访问的cookie了(也就是非httpOnly的cookie),注意观察的cookie,是由key=value的形
式组成，并且在每一个key,value之间使用分号和空格隔开。

3、cookie的属性选项

我们使用cookie肯定需要设置一些属性，存在这些属性就可以知道cookie的过期时间，发送到那个域名和发送到哪个路径。cookie的属性包括:expires,domain,path,secure,httpOnly。在设置这些属性的时候也是需要按照格式设置的。如下所示。每一个属性后面需要跟一个分号和空格。

"key=name; expires=Thu, 25 Feb 2016 04:18:00 GMT; domain=ppsc.sankuai.com; path=/; secure; HttpOnly"

3.1expires属性

expires属性表示的是：cookie的过期时间，使用GMT表示，可以使用toUTCString()或者使用toGMTString()来获取。
console.log(new Date().toUTCString())  //Wed, 26 Jan 2022 13:14:47 GMT
console.log(new Date().toGMTString())  //Wed, 26 Jan 2022 13:14:47 GMT
expires=Wed, 26 Jan 2022 13:14:47 GMT,表示在2022年1月26日13:14分之后失效。如果在新增cookie的时候，没有增加expires属性，则表示会话阶段，也就
是在浏览器关闭时，cookie就消失。

expires是在http1.0中的属性，在http1.1中新增了max-age,max-age表示从当前创建开始，到cookie过期的时间。max-age可
以为三个值，一个是负值，0，正值。当max-age为负值时，表示cookie为会话阶段。当max-age为0时，表示删除cookie。当cookie的值为正数时，则expires=max-age + 当前时间。

3.2domain和url

domain表示域名，url表示路径。两者结合起来表示当浏览器向某一个域名和路径发送http请求时，需要携带符合域名和路径条件的cookie。
什么是符合条件的域名和路径条件呢？
例如domain设置为"baidu.com",url设置为"/"，当浏览器访问域名为"api.baidu.com"或者"baidu.com"的时候携带cookie，当url为"/"或者为"/home"..均携带cookie。
这里需要注意的是xhr请求默认不会携带cookie的。

3.3secure

secure是保证网络请求安全的，也就是说如果设置cookie为secure，则发送的请求必须是https的。如果是http的请求，即使域名一样，也不会从浏览器携带到服务
器。但是不携带并不代表没有，我们在浏览器上却可以查看到。

3.4httpOnly

我们在设置cookie的时候，默认httpOnly为空。如果某条cookie设置了httpOnly,则就是js不能构操作该条cookie(查看，修改，删除)。

那么为什么有的cookie存在httpOnly，则有的cookie则不存在httpOnly呢?
原因为：如果在某一个用户登录过的网站，其cookie没有设置httpOnly,则当用户受到xss攻击(跨站脚本攻击)的时候，也就是向该网站注入一段js脚本，如果这个脚
本读取的是用户的cookie，并且将该cookie发送给攻击者，则用户信息泄露，攻击者可以拿到该用户登录信息模拟用户登录，造成用户不安全。

4.如何设置cookie

设置cookie存在前端设置和后端设置。

使用JavaScript操作cookie 

1.创建和存储cookie 

// 函数中的参数分别为 cookie 的名称、值以及过期天数
function setCookie(c_name,value,expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
setCookie('name','zzyn',1); // cookie过期时间为1天。

// 如果要设置过期时间以秒为单位
function setCookie(c_name,value,expireseconds){
    var exdate=new Date();
    exdate.setTime(exdate.getTime()+expireseconds * 1000);
    document.cookie=c_name+ "=" +escape(value)+
    ((expireseconds==null) ? "" : ";expires="+exdate.toGMTString())
}
setCookie('name','zzyn',3600);  //cookie过期时间为一个小时

 从下图中可以看出，cookie设置成功。 

2.读取cookie值

// 函数中的参数为 要获取的cookie键的名称。
function getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1){
            c_start=c_start + c_name.length+1;
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1){ 
                c_end=document.cookie.length;
            }

            return unescape(document.cookie.substring(c_start,c_end));
        }
     }

    return "";
}
var uname= getCookie('name');
console.log(uname);

从下图中可以看出，获取到了名称为name的cookie值：zzyn 

3.判断cookie是否存在

// 函数中的参数为，要判断的cookie名称
 function checkCookie(c_name){
    username=getCookie(c_name);
    if (username!=null && username!=""){
        // 如果cookie值存在，执行下面的操作。
        alert('Welcome again '+username+'!');
    }else{
        username=prompt('Please enter your name:',"");
        if (username!=null && username!=""){
            //如果cookie不存在，执行下面的操作。
            setCookie('username',username,365)
        }   
    }
}