关于cookie
cookie
-
cookie的定义
cookie是前端开发中的一个重要概念。cookie翻译为“甜饼干”,由W3C提出被各大浏览器支持的一种解决HTTP请求无状态的方案。
http的无状态是指客服端和服务端的数据交换完毕，连接一旦中断，再次建立连接时又是一个全新的连接，之前的连接的数据会被彻底“遗忘”，这就使服务端无法弄明白这次的连接是由谁发起的。 cookie的使用场景
当用户浏览网站需要对用户身份进行判断，来进行不同响应时，可以利用cookie。第一次发送请求判断校验了用户身份后，把用户身份存放在cookie中，当下次发送请求时服务端就可从cookie中获取之前存放在cookie中信息，而不用再次经过复杂校验。
或是用来保存一些用户在网页上自定义的一些设置，在页面跳转、页面关闭后依然能够记录这些信息。针对不同用户的不同操作做出相应的响应、
- cookie的前端封装代码
var cookie = {
set:function(key,val,time){//设置cookie方法
var date = new Date(); //获取当前时间
date.setDate(date.getDate() + time)//设置cookie过期时间
document.cookie = key + "=" + val +
((time==null) ? '' : ';expires='+time.toGMTString())
},
get:function(key){//获取cookie方法
/*获取cookie参数*/
//删除cookie中的所有空格;
var pureCookie = document.cookie.replace(/\s+/g,"");
//以分号分割cookie存放在arrCookie中
var arrCookie = pureCookie.split(";");
//声明要输出的值
var resultVal;
//遍历arrCookie找出与输入相同的键值对，输出相应值
arrCookie.map((item,index) => {
var result = item.split("=");
if(key == result[0]){
resultVal = result[1];
break;
}
})
return resultVal;
}
}
代码中封装了一个cookie对象，它包含2个方法set和get。
set可以设置cookie，其中包含3个参数，cookie的属性名，cookie的值，cookie的过期时间
get可以取出与输入属性名相同的cookie值
cookie的属性
-
max-age(expires):指定cookie的有效期，单位是秒，表示cookie存在的秒数
- max-age为负:表示此cookie只在本窗口和子窗口有效
- max-age为0:表示删除此cookie
domain:可以访问该cookie的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”
path:可以访问该cookie的域名。如果设置为“/”，则该域名下的所有路径都可以访问该Cookie。注意最后一个字符必须为“/”
-
查看cookie的方法：
help.jpg
cookie存在的问题
存储大小只有4kb
每次发送http请求时cookie都会一并发送，浪费带宽
HTML5的 localStorage和sessionStorage有了更好的解决办法
