1、cookie概念:
将数据保存在客户端【浏览器】的一门会话技术.
2、特点:
1. cookie存储数据在客户端浏览器。数据存储在服务器端,安全等级高。数据cookie存储在浏览器端,安全等级低,容易被篡改,但是访问速度快
2. 浏览器对于单个cookie的大小有限制(4kb)同一个域名下的总cooki e数量也有限制(20个)
3、作用:
1. cookie- 般用于存出少量的不太敏感的数据
2. 在不登录的情况下,服务器对客户端的身份识别
封装三个函数
-
setCookie()——创建Cookie
-
getCookie()——获取Cookie
-
removeCookie()——删除Cookie
代码如下:
// setCookie 创建cookie
// key:键 val:值 time:时间(在这里设置的为几天后)
function setCookie(key, val, time) {
// 操作 存值
var date = new Date();
date.setDate(date.getDate() + time);
document.cookie = `${key}=${val};expires=${date}`;
}
//getCookie 获取cookie
// key
function getCookie(key) {
var arr = document.cookie.split('; ');
for (var item of arr) {
var newArry = item.split('=');
if (newArry[0] == key) {
return newArry[1];
}
}
}
// removeCookie 删除cookie
function removeCookie(key) {
//调用当前设置的cookie,将时间改为 -1
this.setCookie(key, '', -1);
}
// 清空cookie
function clearCookie() {
var clearArry = document.cookie.split('; ');
for (var item of clearArry) {
var newArry = item.split('=');
this.setCookie(newArry[0], '', -1);
}
}
测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<script src="./myCookie.js"></script>
<script>
setCookie('name', '张三');
setCookie('age', 12, 1);
var age_ = getCookie('age');
console.log(age_);
removeCookie('name');
clearCookie();
</script>