关于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});
}