Cookie详解，如何配置实战级cookie【登录检测】

本文链接：https://blog.csdn.net/BobbleHat/article/details/84638465

看到网上有一些博客，但大多都是直接复制粘贴过来的，而且没什么讲解，所以自己想做一个(￣▽￣)~*

Cookie是网页记录在本地文件的一段信息，通常用于本地检测用户的登录状态。一般来说，是用户在成功登录后，网站会记录下一个字段，然后设置一个失效期限，当用户再次登录该网址的时候，网站会判断本地是否有该网址指定的cookie字段，如果在失效期限内则能检索到该cookie，也就不必再次登录。反之如果过了失效期限，则无法检测到该cookie，用户就需要手动登陆了。

如何设置cookie

设置一个实用的用于检测登录状态的cookie需要

添加到cookie的字段
失效期限
支持同域名下多网页调用

document.cookie = "XXXX; path=/; expires= ";

注意：例子里“XXXX；”是添加到cookie的字段，分号不能少(之后会用来分割不同的cookie字段)，path=/ 是支持在同一域名下的所有页面共用所有的cookie字段（否则你的cookie只能在登录页面那一页下被检测到），expires= 是设置失效期限，支持GMT和UTC时间（取决于你的记录方式），鉴于目前的w3c规范建议开发者使用UTC时间，我就以UTC时间举例

let time_hour = 0.1;    //cookie失效时间(小时)

function setcookie(){
    let date = new Date();
    date.setTime(date.getTime() + time_hour* 60* 60* 1000);
    document.cookie = "stu=forTrue; path=/; expires=" + date.toUTCString();
}

在函数外写了一个名字叫time_hover的全局变量，用于设置失效时间，这样利于日后维护（消除魔法数字）。setcookie是函数名，函数里第一行是获取当前时间，第二行是把第一行获取到的当前时间转化为unix时间（详情请百度）并加上你需要设置的失效时间。第三行是就是设置cookie了，forTrue是我设置的添加字段stu是key，最后把第二行计算到的时间转化为UTC时间记做cookie的失效时间。

如何检测cookie

之所以强调是“添加字段”还要不能少分号，是源于实战项目中一定会遇到的一个问题：大家可能听过或者用过一个类似于cookie的本地存储方式叫localStorage，内个是类似于以对象的分开记录下你要记录的字段，就是说要记录下key和value的值一一对应并把每对分开存储，这样提取十分方便，但是cookie只是单纯的把添加的文字段挤在一起，一般规范是以分号隔开，在提取cookie的时候也就会提取到该域名下的所有cookie（所有设置了path=/ 的），这对之后的检测带来了不小的麻烦。举个例子，一个网址提取到的cookie，如下图

*可以看到，在实际使用中，网站的各个网页可能都用到了cookie，也会进行存储不同的字段，而整个网址下的cookie是挤在一堆的，用来表示登录的那个字段夹在里面，*而且还会有一些特殊情况*，不同的操作系统下的浏览器的cookie读法是不一样的，例如Mac的谷歌是上面那样，但是Windows的谷歌自动会在每个分号后面加个空格，在百度浏览器上如果你的cookie没有key值的话会自动加个等号，IE和edge会限制localstorage的载入，所以让每个浏览器都能检测到你要的cookie就要符合cookie标准（cookie规范），并且需要用js来进行解析，下面是所对应的用来检测的例子：

window.onload = function () {
    if (!getcookie()){      //检测登录状态
        //这里是超出失效期限（未登录）
    } else {
        //这里是在失效期限内（已登录）
    }
};
 
function getcookie() {
    let arrCookie = document.cookie.split(";");
    for(let i = 0; i < arrCookie.length; i++){
        let a = arrCookie[i].trim();
        if (a == "stu=forTrue"){
            return true
        }
    }
    return false
}

window.onload里的我就不多说了，下面是调用的用来检测状态的函数。函数名叫getcookie，第一行的目的是以；来进行划分该域名下的cookie内包含的所有字段，并分成若干个部分，组成一个对象，然后用for循环来逐个检索，trim()函数是把字符串的开头和末尾的空格等特殊字符去除（具体请百度）在这里用来适配Windows下的谷歌浏览器，以登录状态字段为stu=forTrue举例，当i为某个值时，arrCookie[i]检测到为stu=forTrue（这里偷懒了，规范上应该把stu后面的值作为判断依据），则直接返回函数为真并跳出，当遍历之后没有检测到这个字段时返回函数为假并跳出，这样整个用于检测登录状态的cookie就做好了

如何删除cookie

在正常项目里一定会给用户一个【退出登录】按钮，用户点击后网页会消除cookie的登录字段并退回到登录页面，cookie的操作其实非常有意思，因为cookie本身并不像localstorage一样有删除命令，而是重新写入空值，并把过期时间写成以前的时间（例如1970年GMT）

function exitOut() {
    document.cookie = "stu=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    location.reload()
}

这样子就相当于把以stu为key的cookie字段抹去了，reload()是刷新页面（指index），然后页面通过判定没有检测到cookie登录字段，返回登录页面

整体流程

用户访问网址时，优先进入index页面，index页面检测是否存在预设好的用于表示登录状态的cookie，若有，则继续显示网站主体部分，若没有，则跳转到登录页面，用户在登录页面进行登录，登录成功后网站在本地记录一个预设字段，并设置失效时间，当用户下次使用该设备再次访问该网址时， #进入逻辑循环#

转载请注明出处谢谢٩(๑>◡<๑)۶