什么是Cookie?
Cookie保存在客户端浏览器中,通过浏览器请求页面时,它会被通过Http头的形式发送过去。被请求的页面,可以通过PHP来获取cookie的值。Cookie和浏览器和域名相关,不同浏览器各自存储,cookie只会在当前域名发送,其他域名不会带上cookie去请求。
cookie的特点:
1.只能存字符,文本:
cookie文本的大小(一般为4kb),cookie的数量存在一些限制,每个站点只能容纳50个cookie。Cookie仅限于简单的字符串信息,他们无法存储复杂的信息。
2. 不安全
Cookie安全性是一个大问题,因为它们是以明文形式存储,可能会造成安全风险,因为任何人都可以打开并篡改cookie。
3.时效性,并且可以删除
当在客户端的浏览器上设置Cookie时,它可以持续数天,数月甚至数年。这样可以轻松保存用户首选项和访问信息,并在用户每次返回站点时保持此信息可用。而且用户可以随时从其计算机中删除cookie。
4.不允许跨域,只能谁存的谁用
Cookie的语法:
默认cookie
document.cookie = "user=admin";
设置具有有效期的cookie(3天之后)
var d = new Date();
d.getDate();获取当前当月天数
d.setDate(d.getDate() + 3); //获取指定日期
document.cookie = "abc=123;expires="+d;
设置具有路径的cookie(3天之后)
document.cookie = "abc=123;path=/page";
设置具有路径和有效期的cookie(3天之后)
var d = new Date();
d.setDate(d.getDate() + 3);
document.cookie = "abc=123;path=/page;expires="+d;
删除cookie:通过有效期,让这个cookie过期
查cookie:
var str = document.cookie;
console.log(str);
cookie的用法:
cookie自身是document对象的一个属性
使用:document.cookie
cookie的规则:要设置的cookie
document.cookie = 要设置的cookie
1.必须是字符:""
2.字符内的格式要求:名=值,如:"user=admin"
3.一条代码只能设置一条cookie
4.设置cookie时,可以配置信息要求
有效期:"expires=日期对象"
路径:"path=/page"
5.cookie的内容和每个配置信息之间用:";"连接
cookie如何封装函数:
// 假设将来的cookie的使用方式为:
// 设置一个默认的cookie
// setCookie("qwe","123");
// setCookie("asd","234",{});
// 设置一个有有效期的cookie
// setCookie("zxc","345",{
// expires:5
// });
// 设置一个有路径的cookie
// setCookie("abc","456",{
// path:"/"
// });
// 设置一个既有有效期又有路径的cookie
// setCookie("hahaha","789",{
// expires:3,
// path:"/"
// });
// 设置cookie(可以实现修改)
function setCookie(key,val,ops){
// ops有可能为的值:
// undefined
// {}
// {expires:3}
// {path:"/"}
// {expires:3,path:"/"}
// 处理的是为undefined时
ops = ops || {};
// 处理有效期
let e = "";
if(ops.expires){
var d = new Date();
d.setDate( d.getDate() + ops.expires );
e = ";expires="+d;
}
// 处理路径
// let p = "";
// if(ops.path){
// p = ";path="+ops.path;
// }
let p = ops.path ? ";path="+ops.path : "";
document.cookie = `${key}=${val}${p}${e}`;
}
// console.log(getCookie("qwe"));
// console.log(getCookie("abc"));
// console.log(getCookie("user"));
function getCookie(key){
// 1.获取所有cookie
let strC = document.cookie;
// 2.使用"; "分割所有cookie,单独拿到每一条
let arrC = strC.split("; ");
// 3.遍历每一条cookie
for(var i=0;i<arrC.length;i++){
// 4.再次使用"="分割,分割成名字和值独立的状态
// 5.判断数组的第一位的名字是否与传进来要获取的cookie的名字一致
if(arrC[i].split("=")[0] === key){
// 6.如果一致,返回数组的第二位,也就是对应的值
return arrC[i].split("=")[1];
}
}
// 7.循环结束后,如果程序还在执行,说明没有找到一致的值,那就返回空字符
return "";
}
// 删除cookie
removeCookie("abc",{
path:"/"
});
// 删除cookie
function removeCookie(key,ops){
// 1.保证ops是个对象
ops = ops || {};
// 2.ops是对象了,无论如何得有个expires的属性为-1
ops.expires = -1;
// 3.将处理好的ops,给setCookie
setCookie(key,"suibianxie,danshibunengshenglue",ops);
}