前置知识
打开浏览器，在application里面就可以看出cookie的属性有name, value, Domain, Path, Expires/Max-Age, HttPOnly, Secure
在浏览器的控制台添加cookie，一次只能添加一个，比如我们要把name和sex添加进去，并加上过期时间max-age，代码如下
添加namedocument.cookie="name=zhangsan; max-age=10
添加sexdocument.cookie="sex=male;max-age=10"
获取cookie:
document.cookie,然后回车,在控制台显示出来了所有的cookiename=zhangsan;sex=male
有了这样的前置知识，我们就可以开始封装cookie
封装到一个index.js里面,封装好以后导出去
export{}
包括设置，获取和删除
setCookie getCookie removeCookie**完整代码如下
用到的知识点有：
结构赋值，用数组来接收 const []= item.split("=) 把字符串转成数组并用分号隔开split()
// cookie里面的属性包括name value domain maxage path
// 必填的有 name,value，另外3个先给默认给一个空
const setCookie = (name, value, { domain, maxAge, path } = {}) => {
// 在控制台设置cookie
// document.cookie = `name=zhangsan; max-age=10`
// 根据同样的语法来封装
let cookieString = `${name}=${value}`;
// 如果有过期时间，就在原来的cookie后面加上maxage
if (typeof maxAge === "number") {
// 用分号隔开
cookieString += `; max-age=${maxAge}`;
}
// 如果设置了路径，就把路径继续加上
if (path) {
cookieString += `; path=${path}`;
}
// 设置完了name value path maxage,就用docment.cookie把cookie写进去
document.cookie = cookieString;
};
// 获取cookie的逻辑
//在控制台获取是document.cookie能得到所有cookie的内容
const getCookie = (name) => {
// 把所有得到的cookie的字符串内容先转成数组，用分号和空格隔开
const cookieArray = document.cookie.split("; ");
let cookieName;
let cookieValue;
// 遍历得到的数组
for (const item of cookieArray) {
// 遍历以后的值，再转成数组，用等号分开
// 用结构赋值的方式，从数组里面后去我们想要的,把结构赋值后的放到一个数组里面
[cookieName, cookieValue] = item.split("=");
// 定义函数的时候，参数是name，也就是说我们要获取的是name
if (cookieName === name) {
return cookieValue;
}
}
// for循环结束，如果里面没找到cookie,返回false
return
};
// 删除cookie就是在removeCookie里面调用 setCookie（），里面加上过期时间
const removeCookie = (name) => {
setCookie(name,'',{maxAge:0})
};
export { setCookie, getCookie, removeCookie };
可以在html里面调用
import{}from"封装好的cookie，然后open with live server在浏览器中查看
因为导入了模块，所以在html里面要加上type="module"
<!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>
<script type="module">
import { setCookie, getCookie, removeCookie } from "./index.js";
// 设置cookie
setCookie("name", "zhangsan");
// 获取cookie，需要打印才能显示在控制台
console.log(getCookie("name"));
// 删除cookie
// removeCookie("name");
// 获取 更新后的cookie
// getCookie("name");
</script>
</body>
</html>
