详细介绍 cookie 和 cookie的添加、查找、删除封装。

开篇

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。

01 - cookie 的作用 💌

• 将数据保存到浏览器中。

---

02 - cookie 的生命周期 💟

• 默认情况下生命周期为一次会话（浏览器关闭）。
• 如果通过 expires 设置过期时间，并且过期时间没有超过设置的时间，下次打开浏览器数据则还会保存。
• 如果通过 expires 设置过期时间，并且过期时间超过了设置的时间，那么数据会被立即删除。

---

03 - cookie 的作用范围 🕳

• 同一个浏览器同一个路径可以访问。
• 如果在同一个浏览器，默认情况下，下一级的路径是可以访问的。
• 如果在同一个浏览器，默认情况下，上一级路径是不可以访问的，需要设置：document.cookie = ‘name=xm;path=/’;
• 如果我们在不同的域名下保存了一个cookie，其他域名是访问不到的，需要设置：domain=“当前域名”;

---

04 - Tips 🥙

• cookie 默认不会保存如何数据。
• cookie 不能一次性设置多条数据，要想保存需要一条一条的设置。
• cookie 有大小和个数的限制。
  个数限制：20~50。
  大小限制：4kb 左右。

---

05 - 获取数据 🌭

document.cookie

console.log(document.cookie);

---

06 - 存储数据 🍜

document.cookie = “key=value;”

document.cookie = "name=张三;";
console.log(document.cookie); // name=张三

---

07 - 设置生命周期 🥚

document.cookie = “key=value;expires=时间”;

var date = new Date();
date.setDate(date.getDate() * 1);
// 设置为一天后过期
document.cookie = "name=张三;expires="+ date.toGMTString() +"";

---

08 - 设置路径 ☕

document.cookie = “key=value;expires=time;path=/”;

// 设置到根目录上面这样 上一级 和 下一级都能访问这个cookie了。
document.cookie = "name=张三;path=/;" 

---

09 - 设置域名 🍧

document.cookie = “key=value;expires=time;path=/;domain=127.0.0.1;”;

document.cookie = "name=张三;domain=127.0.0.1;";

---

10 - 添加 cookie 封装 🍦

function addCookie(key,value,day,path,domain) {
	// 1. 处理默认路径
	var index = window.localtion.pathname.lastIndexOf('/');
	var currentPath = window.localtion.pathname.slice(0,index);
	path = path || currentPath;

	// 2. 处理默认保存 domain
	domain = domain || document.domain;

	// 3. 处理日期
	if (!day) {
		// 没有传递
		document.cookie = ""+key+" + " = " + "+ value+";path="+path+";domain="+domain+" ";
	} else {
		// 传递了日期
		var date = new Date();
		date.setDate(date.getDate() * day);
		document.cookie = ""+key+" + " = " + "+ value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+" ";
	}
}

addCookie('name','cjsm',1);

---

11 - 查找 cookie 封装 🍫

function getCookie(key) {
	var res = document.cookie.split(";"); // [name=张三]
	for (var i = 0; i < res.length; i++) {
		var temp = res[i].split("=");  // res[i] -> name=张三
		if (temp[0].trim() == key) {
			return item[1];
		}
	}
}
getCookie('name');

---

12 - 删除 cookie 封装 🍺

function delCookie(key,path) {
	addCookie(key,getCookie(key),-1,path);
}
delCookie(name,'/');