0. 前言
在我们浏览网站，可能会登录一些网页，登录密码，ID，等信息，而你登录一次之后，网站通过读取Cookie，得知你的相关信息，不用再次输入密码，ID等，就能登录了。
登录.png
1. 简介
cookie 是在运行在客户端的，是存储访问者的计算机的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。可以使用 JavaSciipt 来创建和取回 cookie 的值，cookie是以键值对的形式保存的，即 key=value的格式。各个 cookie 之间一般是以"；"分隔。
2. 优点和缺点
2.1 优点
- 可配置 cookie 到期时间
- 数据的持久性，可以设置它的存在时间。
2.2 缺点
- cookie 可能被禁用，当用户非常注重个人隐私保护时，他很可能禁用浏览器的 cookie 功能。
- cookie 是与浏览器相关的，这意味着即使访问的是同一个页面，不同的浏览器之间所保存的 cookie 也是不能互相访问的。
- cookie 可能被删除，以为每个 cookie都是硬盘上的一个文件，因此很有可能被用户删除。
- cookie 安全性可能不够高，所有的 cookie 都是以纯文本的形式记录于文件中，因此如果要保护用户名密码等信息时，最好事先经过加密处理。
3. 操作 cookie
3.1 设置 cookie
- 在 cookie 名和值中不能使用分号(；)、逗号(，)、等号(=)以及空格。如何来储存这些值？
- 方法是用 escape() 函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为"20%"，从而可以存在于 cookie 值中，而且可以避免中文乱码的出现。
转换前
document.cookie="str="+escape("I Love H5");
转换后
document.cookie="str=I%20Love%20H5";
转换后.png
3.2 获取 cookie
document.cookie="name=liu";
var cookie = document.cookie;
console.log(cookie);//输出 name=liu
3.3 设置 cookie 过期时间
如果不设置的话，则变成会话存储(关闭浏览器就没了)
//每次设置cookie的时候，需要设置一个过期时间
var date = new Date();
//设置10天后过期
date.setTime(date.getDate() + 10 * 24 * 3600 * 1000);
//5秒之后过期
date = new Date();
date.setTime(date.getTime() + 5 * 1000);
document.cookie = "sex=" + escape("女") +";expires="+date.toGMTString();
3.4 删除 cookie
删除 cookie 只需要设置某个 cookie的过期时间指定为过去时间即可
//立即删除cookie（就是设置过期时间为负数即可）
date = new Date();
date.setTime(0);
document.cookie = "name=xxx;expires=" + date.toGMTString();
4. 封装一个 cookie 库
封装之后可以实现：
- 添加cookie 或 修改 cookie
- 批量增加
- 获取某个cookie的值
- 立即删除某个cookie的值
5. 封装的代码
var Cookie = {
// 添加cookie 或 修改 cookie
// key:键
// value:值
// expressDay:过期时间（单位：天）
setCookie : function (key,value,expiresDay) {
var date = new Date();
date.setTime(date.getTime() + expiresDay * 24 * 3600 * 1000);
//为了测试方便先写死10秒后过期
// date.setTime(date.getTime() + 10 * 1000);
document.cookie = key + "=" + escape(value) + ";expires=" + date.toGMTString();
},
//批量增加
setCookies : function (cookieobj,expiresDay) {
var date = new Date();
date.setTime(date.getTime() + expiresDay * 24 * 3600 * 1000);
for (var tempProp in cookieobj) {
document.cookie = tempProp + "=" + escape(cookieobj[tempProp]) + ";expires=" + date.toGMTString();
}
},
//获取某个cookie的值
getCookie : function (key) {
//先按照分号 + 空格 切割cookie串
var cookie = document.cookie;
var cookieArr = cookie.split("; ");
//遍历数组得到每一组cookie
for (var tempCookie of cookieArr) {
//每组cookie按照等号去切割
var keyAndValueArr = tempCookie.split("=");
if(keyAndValueArr[0] == key) {
//需要解码
return unescape(keyAndValueArr[1]);
}
}
},
//立即删除某个cookie
delCookie : function (key) {
this.setCookie(key,"", -10);
}
}
6. 测试 cookie 封装库
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部文件-->
<script type="text/javascript" src="cookie.js"></script>
</head>
<body>
<script type="text/javascript">
Cookie.setCookie("name","小雪",10);
Cookie.setCookie("age","18",10);
console.log(Cookie.getCookie("name"));
Cookie.delCookie("name");
Cookie.setCookies({
age : 18,
sex : "女"
}, 10);
</script>
</body>
</html>
6.1 添加
Cookie.setCookie("name","小雪",10);
Cookie.setCookie("age","18",10);
添加.png
6.2 获取
console.log(Cookie.getCookie("name"));//输出 小雪
获取.png
6.3 删除
Cookie.delCookie("name");
删除.png
6.4 批量添加
Cookie.setCookies({
age : 18,
sex : "女"
}, 10);
批量添加.png
7. 结束语
在这里说下，cookie 很早就有了，最初的目的就是为了存储 Web 中状态信息，方便服务器端使用。可以判断用户是否是第一次登陆等，最后，点赞，分享。
