浅谈cookie

Cookie是用于存储web页面的用户信息

什么是Cookie

大家都知道，HTTP是一种无状态的协议，当我们访问某个网站时，服务器单从网络连接上是无法知道访问者的身份。为了解决这个问题，那我们就给给个访问者发一个身份证，访问网站时必须携带上自己的身份证，这样呢服务器就能轻而易举的识别出每个访问者。这样就完美解决了如何记录客户端的用户信息问题了：

• 当用户访问web页面时，他的信息可以记录在cookie中
• 在用户下一次访问的时候，就可以从cookie中读取用户的信息
  说白了，Cookie是一些数据信息，存储在访问者的电脑里。

Cookie的分类

Cookie大致分为两种：会话cookie和持久cookie。
会话cookie的生存周期是一次会话过程，当用户退出浏览器时，会话cookie就会被删除。
持久cookie的生存周期取决于设置的过期时间，在过期之前，会一直保存在电脑上，即使退出浏览器，他们依然存在。

Cookie的常见属性

name：即键名
value：即键值
Domain：域名，只有访问固定的域名，才能读取cookie中在该域名的数据信息
Path：路径
Expires：过期时间
Size：数据大小

创建Cookie

创建会话cookie

document.cookie = "usrname=kevin"
// 我们会在cookie中找到键名为“usename”的数据

创建持久cookie

document.cookie = "username=kevin;expires=Thu, 18 Dec 2043 12:00:00 GMT;"
document.cookie = "age=20;expires=Thu, 18 Dec 2043 12:00:00 GMT;"

获取Cookie

var cookie = document.cookie;
// 获取到的cookie是一个字符串"username=kevin; age=20"

修改Cookie

修改cookie很类似于对变量的重新赋值过程

document.cookie = "username=steven;expires=Thu, 18 Dec 2043 12:00:00 GMT;"
// cookie会重新覆盖键名为username的数据值

Cookie实例化

设置cookie值的函数

创建cookie实例化的过程相当于工厂模式，需要我们配置键名、键值、过期时间等。

/**
 *设置cookie
 *@param {String} name
 *@param {String} value
 *@param {Number} days
*/
function setCookie(name,value,days){
    let now = new Date();
    now.setTime(now.getTime() + (days*24*60*60*1000));
    document.cookie = `${name}=${value};expires=${now}.toGMTString();path=/`
}

获取cookie值的函数

我们知道，获取的cookie值是一段字符串，当我们需要获取某个参数的值，需要我们去字符串中查找，需要我们对字符串进行搜索和截取。

// 方案一
/**
 *通过遍历获取cookie中的某个参数值
 *param {String} cname
*/
function getCookie(cname){
    let name = cname + "=";
    const cookieArr = document.cookie.split(";");
    for(let i=0; i<cookieArr.length; i++){
        var cookie = cookieArr[i].trim();
        if(cookie.indexOf(name) == 0){
            return cookie.substring(name.length)
        }
    }
}
// 方案二
/**
 *通过正则获取cookie中的某个参数值
 *param {String} cname
*/
function getCookie(cname){
    var cookieArr,reg=new RegExp("(^| )"+cname+"=([^;]*)(;|$)");
    if(cookieArr = document.cookie.match(reg)){
        return cookieArr[2];
    }else{
        return null;
    }
}