- cookie的诞生
-
/*
http协议是无状态的
但是我们有记录状态的需求,所以为了解决这个问题,就诞生了cookiecookie的作用:维护客户端与服务器之间的状态
cookie的缺点:1、有安全隐患;2、cookie存储的数据量有限(4k)在网络请求的过程中所有的cookie都是带着的,(以请求头的方式发送给服务器)
cookie是与域名绑定的,不能从一个域名下去获取另外一个域名下面的cookie
在父级路径设置cookie,在子路径中是可以访问的,但是反过来不行*/ - 操作
-
原生js如何操作cookie?
获取cookie的方式:document.cookie 这种方式获取的是所有的cookie
cookie的存储格式:cookie由键值对组成(key=value)多个cookie之间使用分号和空格隔开
(username=lisi; age=12)
设置cookie的方式:document.cookie='username=lisi' -
// 设置会话cookie(关闭浏览器就消失了)
// $.cookie('name', 'value');
// $.cookie('name', 'value',{
// expires : 7,
// path : '/'
// });
// 设置cookie
// $.cookie('age', '12');
// 获取单个cookie
// console.log($.cookie('age'));
// 获取所有cookie(格式是对象形式)
// console.log($.cookie().age);
// ------------------------------------
// 删除cookie
// $.removeCookie('age'); -
cookie的分类:
1、会话cookie,这种cookie只存储在内存,不会存储到文件中,浏览器关闭之后就会消失
2、持久cookie,这种cookie会存储在文件中,浏览器关闭之后不会消失*/
document.cookie = 'username=lisi';
document.cookie = 'age=12';var date = new Date();
// 7天以后
date.setDate(date.getDate() + 7);// document.cookie = 'username=lisi; expires=' + date.toGMTString() + '; path=/';
// document.cookie = 'age=12; expires=' + date.toGMTString();// console.log(document.cookie);
// var str = document.cookie;
// console.log(typeof str);
- 原生js实现获取指定的cookie值
document.cookie='username=xiaobai';
document.cookie='age=18';
var date=new Date();
date.setDate(date.getDate()+7);//当前时间的7天后
document.cookie="username=xiaobai; expires="+date.toGMTString()+"; path=/";
document.cookie="age=12; expires="+date.toGMTString()+"; path=/";
//实现一个方法,获取指定的cookie值
function getcookie(key){
var cookies=document.cookie;//"username=xiaobai; age=12"
var ck=cookies.split("; ");//把字符串转成数组
console.log(ck)//["username=xiaobai", "age=12"]
if(ck){
for(var i=0;i<ck.length;i++){
var kv=ck[i].split("=");//把数组里的每一个元素取出来=去掉变成有两个元素的每一个数组;
//console.log(kv)//["username", "xiaobai"] ["age", "12"]
if(kv[0]==key){
return kv[1];
}
}
}
};
console.log(getcookie("age"));
//实现一个方法,设置cookie的值
function setcookie(key,value,param){
document.cookie=key+"="+value+"; expires"+"="+param.expires+"; path"+"="+param.path;
}
setcookie("sex","gril",{
expires:date.toGMTString(),
path:"/"
})