cookie封装,使用更方便

cookie封装

在这里插入图片描述

  • 当提到"cookie封装",通常是指在开发中对浏览器cookie的处理进行封装和管理,以简化代码和提高可维护性。在Web开发中,cookie是一种用于存储少量数据的小文件,存储在用户的浏览器中。它们被广泛用于跟踪用户会话,记录用户偏好,进行用户身份验证等。

  • 在进行cookie封装时,你可以考虑以下步骤:

    1. 封装功能:创建一个JavaScript函数或类,用于处理cookie的设置、获取、删除等操作。这样可以将cookie相关的代码封装在一个地方,方便维护和复用。
    2. 设置cookie:在封装中提供一个函数,用于设置cookie的值。该函数可能需要接收参数,例如cookie名称、值、过期时间等。
    3. 获取cookie:提供一个函数来获取指定cookie的值,可以传入cookie名称作为参数,并返回对应的值。
    4. 获取全部cookie:获取所有的cookie,返回一个对象
    5. 删除cookie:封装一个函数,用于删除指定的cookie。
    6. 删除所有cookie:删除所有cookie
  • 简单的cookie封装式-示例:

    cookieManager.js

const CookieManager = {
	setItem: function(key,value,date){
        //方式一:使用expires,单位是天
        // const endDate = new Date();
        // endDate.setDate(endDate.getDate() + date);
        // document.cookie = key + '=' + value + '; expires=' + endDate;

        //方式二:使用max-age,单位是秒
        document.cookie = `${key}=${value}; max-age=${date}`
    },
    getItem: function(key){
      const cookies = document.cookie.split('; ');
      for (const cookie of cookies) {
        const item = cookie.split('=');
        if (item[0] === key) {
          return item[1];
        }
      }
    },
    getAll: function(){
      const cookies = document.cookie.split('; ');
      const result = {};
      for (const cookie of cookies) {
        const item = cookie.split('=');
        result[item[0]] = item[1];
      }
      return result;
    },
    removeItem: function(key){
        const item = this.getItem(key);
        if (item) {
          document.cookie = `${key}=${item}; max-age=0`;
        }
    },
    clear: function(){
        const cookies = document.cookie.split('; ');
        for (const cookie of cookies) {
            const item = cookie.split('=');
            document.cookie = `${item[0]}=${item[1]}; max-age=0`;
        }
    }
}
  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值