Cookie的封装

最新推荐文章于 2023-11-30 16:57:48 发布

原创最新推荐文章于 2023-11-30 16:57:48 发布 · 199 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ecmascript #前端

本文提供了一段JavaScript代码，用于实现对浏览器Cookie的添加、删除和查询功能。通过cookie.setItem()、cookie.removeItem()和cookie.getItem()方法，可以方便地管理Cookie的key-value对，支持设置路径和有效期。

 // - 增：cookie.setItem("key", "val", {})
  // - 删：cookie.removeItem("key", {})
  // - 查：cookie.getItem("key")

  const cookie = {
    setItem(key, val, ops={}){
      // 配置路径
      let p = "";
      if(ops.path){
        p = ";path=" + ops.path;
      }
      // 配置有效期
      let e = "";
      if(ops.expires){
        const d = new Date();
        d.setDate( d.getDate() + ops.expires );
        e = ";expires="+d;
      }
      // 设置cookie
      document.cookie = `${key}=${val}${p}${e}`;
    },
    removeItem(key, ops={}){
      // 所谓删除，其实就是设置相同的key和路径，过去的日期
      this.setItem(key, "", {expires: -1, ...ops});
    },
    getItem(key){
      // 将cookie的总值，分割成独立的cookie键值
      const arr = document.cookie.split("; ");
      // 遍历分割之后的cookie
      for(let i=0;i<arr.length;i++){
        // 将cookie的名和值，再次分割
        const c = arr[i].split("=");
        // 判断cookie的名是否和传入的key相同
        if(c[0] === key){
          // 返回对应的值
          return c[1];
        }
      }
      // 遍历结束后，如果还没有返回，说明没有找到符合的cookie，返回null
      return null;
    }
  }


  // 增
  // cookie.setItem("a", "10")
  // cookie.setItem("key", "val", {})
  // cookie.setItem("name", "admin", {path:"/"})
  // cookie.setItem("age", "18", {expires:3})
  // cookie.setItem("msg", "hahaha", {path:"/", expires:7})

  // 改
  // cookie.setItem("age", "20", {expires: 7})
  
  // 删
  // cookie.removeItem("key")
  // cookie.removeItem("msg", {path: "/"})

  // 查
  console.log(document.cookie);