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});
}
上一篇:NOI ONLINE 入门组 魔法 矩阵快速幂


下一篇:【Activiti工作流引擎】官方快速入门demo