首先在index.js文件里面封装一个cookie,然后导出

/* 封装cookie,包括读取，写入，删除 */
// {domain,maxage,path}={}，这里是用结构赋值的方法，把需要的从右边{}取出来
// 在控制台添加cookie方法是document.cookie="(要添加的cookie) ;分号后面是cookie的属性"
const setCookie = (name, value, { domain, maxAge, path } = {}) => {
  // 因为在控制台加cookie是document.cookie = "name = zhangsan"
  // 也就是属性=等于属性值，所以这里的代码就写成`${name}= ${value}`
  let cookieString = `${name}= ${value}`;
  // 判断一下，过期时间是数字的话
  if (typeof maxAge === "number") {
    cookieString += `; max-age=${maxAge}`;
  }
  // domain指的是在哪个域名下，比如www.bilibili.com
  // 这一段代码的意思是如果设置了过期时间，那么就在添加cookie的时候 ，在后面加上过期时间
  if (domain) {
    cookieString += `;domain=${domain}`;
  }
  // 这里是路径，域名后面还跟着路径
  // 比如bilili后面的音乐部分，bilibli/misic
  if (path) {
    cookieString += `; path={path}`;
  }
  // 因为在控制台加cookie的方式是document.cookie = "name = zhangsan"
  // 上面定义好了cookieString，所以这里要加一个document.cookie
  document.cookie = cookieString;
};

// 接着写获取cookie的函数
// 现在控制台里面已经有了cookie,内容是：name = zhangsan
const getCookie = (name) => {
  // 先把里面的内容转成数组，用split方法，用分号和空格分开
  const cookieArr = document.cookie.split("; ");
console.log(cookieArr);
  let cookieName
  let cookieValue
  // 得到了一个包含属性，属性值的数组，接着遍历
  for (const item of cookieArr) {
    // 现在item就是属性和属性值，item是字符串，
    // item继续转数组，用等号分开
    // 用结构赋值的方法获取属性、属性值
    [cookieName, cookieValue] = item.split("=");
    // 判断如果cookieName === name
    if (cookieName === name) {
      return cookieValue;
     }
  }
  //   for循环结束，如果没找到，就返回undefind
  return;
};

// 删除cookie的逻辑
// cookie已经传进去了，传进去的cookie加一个过期时间maxAge=0或者expires=0就可以了
const removeCookie =(name)=>{
    setCookie(name,"",{maxAge:0})

}
// 然后导出去让其他地方可以用
// 导入和导出的时候，都用{}包起来
export { setCookie,getCookie,removeCookie };

在index.html里面导入封装好的cookie然后测试

<script type="module">
// 引入封装好的cookie
import {setCookie,getCookie,removeCookie} from "./index.js" 
// 测试一下引用的封装模块能不能用
// 写入cookie，在index.js已经封装好了写入cookie的值，过期时间和路径
// 这里可以直接使用
setCookie("name","zhangsan")
// 获取cookie
getCookie()
// 删除cookie
// removeCookie()
// 判断一下是否删除成功
console.log(removeCookie());

</script>