37js学习第二十一天缓存cookie

liuyaoshun123456

于 2022-05-15 15:36:16 发布

阅读量415

点赞数

文章标签：学习缓存 javascript

本文链接：https://blog.csdn.net/liuyaoshun123456/article/details/124782667

版权

// 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的方法封装

// 封装
// 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<arr.length;i++){
var arrItem = arr[i].split("=");
setCookie(arrItem[0],"",-1)
// console.log(arrItem)
}
}
// clearCookie()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03sessionStorage</title>
</head>
<body>
<h1>03sessionStorage</h1>
<button>setItem()</button>
<button>getItem()</button>
<button>removeItem()</button>
<button>clear()</button>
</body>
<script>
// 03sessionStorage 会话缓存
// 缓存时间为当前tab页面浏览器打开期间关闭清除

// window.sessionStorage 对象

// 属性
// length 缓存数据的条数
console.log(window.sessionStorage.length);

var aBtns=document.getElementsByTagName("button");

// 设置 sessionStorage.setItem("key","value");
aBtns[0].οnclick=function(){
sessionStorage.setItem("name","孙悟空");
}

// 获取 sessionStorage.getItem("key")
aBtns[1].οnclick=function(){
console.log(sessionStorage.getItem("name"))
}

// 删除 sessionStorage.removeItem("key")
aBtns[2].οnclick=function(){
sessionStorage.removeItem("name")
}

// 清空 sessionStorage.clear()
aBtns[3].οnclick=function(){
sessionStorage.clear()
}

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04localStorage</title>
</head>
<body>
<h1>04localStorage</h1>
<button>setItem()</button>
<button>getItem()</button>
<button>removeItem()</button>
<button>clear()</button>
</body>
<script>
// 04localStorage 本地缓存
// 缓存时间为永久除非手动删除

// window.localStorage 对象

// 属性
// length 缓存数据的条数
console.log(window.localStorage.length);

var aBtns=document.getElementsByTagName("button");

// 设置 localStorage.setItem("key","value");
aBtns[0].οnclick=function(){
localStorage.setItem("name","孙悟空");
}

// 获取 localStorage.getItem("key")
aBtns[1].οnclick=function(){
console.log(localStorage.getItem("name"))
}

// 删除 localStorage.removeItem("key")
aBtns[2].οnclick=function(){
localStorage.removeItem("name")
}

// 清空 localStorage.clear()
aBtns[3].οnclick=function(){
localStorage.clear()
}

</script>
</html>

liuyaoshun123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
37js学习第二十一天缓存cookie

// 01JavaScript的cookie // - cookie是用来储存web页面的用户信息。 // - 由于HTTP是一种无状态的协议，服务器单从网络链接上是无法知道客户信息的。这个时候服务器会给客户端（浏览器）颁发一个cookie，用来确认用户的信息。 // 获取 document.cookie console.log(document.cookie); // 设置 // document.cookie="name=value;do...
复制链接

扫一扫