cookie的概念:
指某些网站为了辨别用户身份,进行session(会话)跟踪而存储在用户本地终端上的数据(通常经过加密)。以文本形式存在。
会话跟踪技术cookie:
跟踪每一次的连接,记录连接产生的信息,下次连接,跟着一起发送过去
特点:
1.只能存字符,文本
2.不允许跨域(谁存的,谁用)
3.时效性,默认会话级,关闭浏览器,可以删除(在一定时间内有效,即时效性)
4.数量(50左右)和大小(4k)限制
cookie的使用:
1、设置默认的cookie:
document.cookie = "user=admin";
document.cookie = "pass=123";
console.log(document.cookie);
在获取cookie时,document.cookie会一次性获取所有cookie,浏览器给我们返回的结果是以以下的格式呈现
user=admin; pass=123
但是这个结果不影响设置格式,设置的时候该怎么设置还是怎么设置
不允许一次性存多条
document.cookie = "a=10;b=20;c=30"; //只会生效第一个
console.log(document.cookie);
2、设置有有效期的cookie
var d = new Date();
d.setDate(d.getDate() + 3);//获取指定日期
document.cookie = "abc=123;expires=" + d;
document.cookie = "qwe=345;path=/";
console.log(document.cookie);
注意:
查询cookie时,无法获取当前cookie的有效期和路径
cookie的详细信息只能通过工具(浏览器的控制台)查看
3、cookie的删除:只要将指定的日期设成过去的时间即可
var d = new Date();
d.setDate(d.getDate() - 1);//获取指定日期(无法获取以前的日期)
document.cookie = "zxc=567;path=/;expires=" + d;
console.log(document.cookie)
注意:
相同的路径下只能存在一个重名的cookie,重复设置相当于修改
document.cookie = "a=10";
document.cookie = "a=20";
不同路径可以存在重名的cookie
document.cookie = "a=20";
document.cookie = "a=30";
document.cookie = "a=20;path=/";
cookie的封装:
1、cookie的设置封装:
function setCookie(key,val,ops){
ops = ops || {};
let e = "";
if(ops.expires){
var d = new Date();
d.setDate(d.getDate() + ops.expires);
e = ";expires="+d;
}
let p = ops.path ? ";path="+ops.path : "";
document.cookie = `${key}=${val}${p}${e}`;
}
使用方法法之一:
设置一个既有有效期又有路径的cookie
setCookie("hahhah","677",{
expires:3,
path:"/"
});
2、cookie的获取封装:
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 "";
}
使用方法示例:
console.log(getCookie("qwe"));
console.log(getCookie("abc"));
console.log(getCookie("user"));
3、cookie删除的封装:
function removeCookie(key,ops){
// 1.保证ops是个对象
ops = ops || {};
// 2.ops是对象了,无论如何得有个expires的属性为-1
ops.expires = -1;
// 3.将处理好的ops,给setCookie
setCookie(key,"hsa",ops);
// 这里的第二个值不能省略
}
使用方法示例:
removeCookie("abc",{
path:"/"
});