cookie小栗子-实现简单的身份验证

关于Cookie

Cookie是一种能够让网站Web服务器把少量数据储存到客户端的硬盘或内存里，或是从客户端的硬盘里读取数据的一种技术。

用来保存客户浏览器请求服务器页面的请求信息，可以在HTTP返回体里，通过设置Set-Cookie来告诉浏览器端所要存储的cookie

cookie所有浏览器都识别，并且会缓存到浏览器，虽然cookie保存在浏览器端，但是一般是在服务器端设置的

cookie是以键值对的形式保存（key=value），各个cookie之间一般是以“;”分隔

要表示唯一的一个cookie值需要加 name、domain、path

cookie是不可跨域的，他会根据域名来区分是向哪个服务器发送数据

cookie的默认生命周期是当浏览器关闭以后生命就结束，通过expires可以设置生命周期

let d = new Date();
d.setDate(d.getDate()+1);
d.setMinutes(d.getMinutes() + 5);
document.cookie = 'name = xh;' +'expires='+d;

设置cookie

document.cookie = 'name'+username

设置cookie都会调用tostring,可以通过JSON.parse转一下来解决

对于前端来说，种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();
} 

读取cookie

document.cookie

返回结果会把域中所有cookie都显示出来key=val;每个之间以分号 空格来分

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

    if(arr=document.cookie.match(reg))

        return unescape(arr[2]);
    else
        return null;
} 

删除cookie

使用JavaScript清理Cookie找到该Cookie对应的Name对应的值，然后设置其为过期

function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
} 

cookie与session之间的区别：

cookie保存在浏览器端，session保存在服务器端

单个cookie保存的数据不能超过4kb，session大小没有限制

cookie的应用场景：

猜你喜欢、身份验证、每日推荐、免登录等等

下面是一个简单的身份验证的小栗子

  <div id="login">
            用户名:<input type="text" id="user">
            密码:<input type="password" id="pw">
            <br/>
            <label>
                十天免登录:
                    <input type="checkbox" id="cd">
            </label>
            <button id="btn">登录</button>
            <button id="btn2">注册</button>
    </div>
    <div id="box" style="display: none">
        <p id="txt"></p>
        <button id="up">退出</button>
    </div>

  let sql = [
        {
            uv:'虾米',
            pv:123456
        },
        {
            uv:'网易云',
            pv:123456
        },
        {
            uv:'QQ',
            pv:123456
        },
        {
            uv:'酷狗',
            pv:123456
        }
    ];

    if(getCookie('user')){
        login.style.display = 'none';
        box.style.display = 'block';
        txt.innerHTML = '欢迎'+getCookie('user')+'回来!';
    }

    up.onclick = function(){
        rmCookie('user',getCookie('user'));
        window.location.reload();
    }

    btn.onclick = function(){
        let uv = user.value;
        let pv = pw.value;

        let obj = sql.find(e=>e.uv == uv);
        //有数据
        if(obj){
            if(obj.pv == pv){
                alert('登录成功');
                if(cd.checked){
                    setCookie('user',obj.uv,{name:'date',time:10})
                }else{
                    setCookie('user',obj.uv);
                }
                window.location.reload();
            }else{
                alert('用户名或密码错误');
            }
        }else{
            alert('此用户不存在');
        }
        console.log(obj);
    }

   //设置cookie
    function getCookie(key){
        let c = document.cookie.split('; ');
        let on = false;
        for(let i of c){
            let arr = i.split('=');
            if(arr[0] === key){
                on = true;
                return arr[1];
            }
        }
        if(!on)return null;
    }
    //获取cookie
    function setCookie(key,val,obj={}){
        let d = new Date();
        let {name,time} = obj;
        switch(name){
            case 'date' :
                d.setDate(d.getDate() + time);
            break;
            case 'minu' :
                d.setMinutes(d.getMinutes() + time);
            break;
            case 'hour' :
                d.setHours(d.getHours() + time);
            break;
        }
        document.cookie = key +'='+ JSON.stringify(val) + (obj.time?'; expires='+ d:'');
    }
 　//删除cookie
    function rmCookie(key,val){
        setCookie(key,val,{name:'date',time:-1});
    }