37js学习第二十一天缓存cookie
// 01JavaScript的cookie
// - cookie是用来储存web页面的用户信息。
// - 由于HTTP是一种无状态的协议，服务器单从网络链接上是无法知道客户信息的。这个时候服务器会给客户端（浏览器）颁发一个cookie，用来确认用户的信息。
// 获取 document.cookie
console.log(document.cookie);
// 设置
// document.cookie="name=value;domain=.domain.com;path=/;expires=;"
document.cookie="name=张三";
document.cookie="age=20";
// 设置有效期
// document.cookie="name=张三;expires=Mon May 09 2022 10:32:51";
// 设置之前的时间 删除
// document.cookie="name=张三;expires=Mon May 08 2022 10:32:51";
// name:一个唯一确定的cookie名称。通常cookie名称不区分大小写
// value:存储在cookie中的字符串值。最好为cookie的name和value进行url编码
// domain:cookie对哪个域是有效的 域名 www.baidu.com
// path:表示这个cookie影响到的路径，浏览器会根据这个配置项，向指定的域中匹配的路径发送cookie
// expires:失效时间 表示cookie何时被删除（停止向服务器发送cookie） 时间值是GMT格式的 设置过去的时间，直接删除 默认为会话缓存（关闭浏览器删除）
// max-age:与expires效果相同 max-age优先级高于expires
// httpOnly:告知浏览器不允许通过脚本document.cookie去更改这个值，同样这个值在document.cookie中也不可见。但在http请求者仍然会携带这个cookie。注意这个值虽然在脚本中不可获取，但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
// secure:安全标志，指定后，只有在使用SSL链接时才能发送到服务器，如果是http链接则不会
// 02cookie的方法封装
// - cookie是用来储存web页面的用户信息。
// - 由于HTTP是一种无状态的协议，服务器单从网络链接上是无法知道客户信息的。这个时候服务器会给客户端（浏览器）颁发一个cookie，用来确认用户的信息。
// 封装
// 1.相同部分 不做处理
// 2.不同部分 使用参数表示
// 获取 document.cookie
console.log(document.cookie);
function getCookie(key) {
// age=20; name2=猪八戒; name3=沙僧; name=孙悟空
// 转换为数组
var arr = document.cookie.split("; ");
// console.log(arr);
// 将arr进行遍历
for (var i = 0; i < arr.length; i++) {
// console.log(arr[i])
// if(arr[i].match(key)!=null)
// if(arr[i].search(key)!=-1){
// console.log(arr[i].substring(arr[i].indexOf("=")+1))
// }
var arrItem = arr[i].split("=");
// console.log(arrItem);
if (arrItem[0] == key) {
console.log(arrItem[1])
}
}
}
// getCookie("name2");
// 设置
// document.cookie="name=value;expires=time";
function setCookie(name, value, time) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + time); //设置过去时间 以天计数
// document.cookie=name+"="+value+";expires="+time;
document.cookie = `${name}=${value};expires=${oDate}`;
}
setCookie("name", "孙悟空", 30);
setCookie("name2", "猪八戒", 20);
setCookie("name3", "沙僧", 10);
// 删除 设置失效时间为之前的时间
function removeCookie(key) {
setCookie(key,"",-1)
}
// 清空
function clearCookie(){
var arr = document.cookie.split("; ");
for(var i=0;i
setCookie(arrItem[0],"",-1)
// console.log(arrItem)
}
}
// clearCookie()