首页 > 其他分享 >cookie封装

cookie封装

时间:2023-08-05 20:56:32浏览次数:33  
标签:username 封装 name CookieManager cookie const

cookie封装

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

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

    1. 封装功能:创建一个JavaScript函数或类,用于处理cookie的设置、获取、删除等操作。这样可以将cookie相关的代码封装在一个地方,方便维护和复用。
    2. 设置cookie:在封装中提供一个函数,用于设置cookie的值。该函数可能需要接收参数,例如cookie名称、值、过期时间等。
    3. 获取cookie:提供一个函数来获取指定cookie的值,可以传入cookie名称作为参数,并返回对应的值。
    4. 删除cookie:封装一个函数,用于删除指定的cookie。
    5. 处理cookie过期:在封装中考虑处理cookie过期问题,确保在设置cookie时,可以选择设置过期时间。
    6. 兼容性考虑:在封装中处理不同浏览器的差异,确保cookie在各种环境下都能正常工作。
  • 简单的cookie封装式-类方式封装方示例:

// Cookie封装类
class CookieManager {
  static setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = `expires=${date.toUTCString()}`;
    document.cookie = `${name}=${value};${expires};path=/`;
  }

  static getCookie(name) {
    const cookieString = document.cookie;
    const cookies = cookieString.split(';');
    for (const cookie of cookies) {
      const [cookieName, cookieValue] = cookie.trim().split('=');
      if (cookieName === name) {
        return cookieValue;
      }
    }
    return null;
  }

  static deleteCookie(name) {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
  }
}

// 使用示例
CookieManager.setCookie('username', '用户名', 7); // 设置一个名为'username'的cookie,有效期7天
const username = CookieManager.getCookie('username'); // 获取名为'username'的cookie值
console.log(username); // 输出:'用户名'
CookieManager.deleteCookie('username'); // 删除名为'username'的cookie
  • 简单的cookie封装式-对象方式封装方示例:
// Cookie封装对象
const CookieManager= {
  setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = `expires=${date.toUTCString()}`;
    document.cookie = `${name}=${value};${expires};path=/`;
  },

  getCookie(name) {
    const cookieString = document.cookie;
    const cookies = cookieString.split(';');
    for (const cookie of cookies) {
      const [cookieName, cookieValue] = cookie.trim().split('=');
      if (cookieName === name) {
        return cookieValue;
      }
    }
    return null;
  },

  deleteCookie(name) {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
  },
}

// 使用示例
CookieManager.setCookie('username', '用户名', 7); // 设置一个名为'username'的cookie,有效期7天
const username = CookieManager.getCookie('username'); // 获取名为'username'的cookie值
console.log(username); // 输出:'用户名'
CookieManager.deleteCookie('username'); // 删除名为'username'的cookie

标签:username,封装,name,CookieManager,cookie,const
From: https://www.cnblogs.com/fangchaoduan/p/17608596.html

相关文章

  • cookie和localStorage和sessionStorage的区别
    cookie和localStorage和sessionStorage的区别下面从几个方向区分一下cookie,localStorage,sessionStorage的区别生命周期:cookie:可设置失效时间,否则默认为关闭浏览器后失效。localStorage:除非被手动清除,否则永久保存。sessionStorage:仅在当前网页会话下有效,关闭页面或关......
  • cookie和服务器Session的区别
    cookie和服务器Session的区别cookie和服务器Session都可用来存储用户信息,cookie存放于客户端,Session存放于web服务器端。因为cookie存放于客户端有可能被窃取,所以cookie一般用来存放不敏感的信息,比如用户设置的网站主题。敏感的信息用Session存储,比如用户的登陆信息。Se......
  • Vue封装一个瀑布流图片容器组件
    说在前面......
  • 在vue项目中封装WebSockets请求
    在Vue项目中封装WebSocket请求包括以下步骤:1.安装WebSocket库:首先,导入WebSocket库,例如`vue-native-websocket`或`socket.io-client`。根据项目需求选择适当的库,并根据官方文档进行安装和配置。2.创建WebSocket服务:在Vue项目中,可以创建一个WebSocket服务,用于管理连接、发送和接收......
  • DO-41封装整流二极管 1N4001G~1N4007G 型号齐全
    整流二极管1000V、1A,一般选用什么型号?最好DO-41封装!同样是DO-41封装反向电压1000V,1N4007和1N4007G有什么区别?1N4007G参数怎么看?价格多少?供货周期要多久?方便发下产品规格书吗?……针对上述提及的问题,整流二极管厂家东沃电子(DOWOSEMI)一一耐心为您解答。1)1000V1A整流二极管型号有哪些?......
  • jquery方法封装
     /*comment.js*/;(function($){ //消息显示$.message=function(content){$('#message').attr('data-content',content);$('#message').popover('show');setTimeout(function(){$(&......
  • 基于antd-input & tsx封装一个按固定位数、固定符号分隔内容的输入框
    /** *可在每四位字符间插入一个空格的输入框 */import{Input}from'antd';import{useEffect}from'react';constInputGap=(props:any)=>{ const{useGap,value,onChange}=props; //非onChange事件变更value useEffect(()=>{  value......
  • IDEA编译封装APK及发布流程指导
    IDEA编译封装APK及发布流程指导目录IDEA编译封装APK及发布流程指导1、安装AndroidSDK2、创建Android项目3、项目结构4、运行环境准备5、安卓虚拟机运行APP6、发布APK注:以下步骤基于IDEACommunity2023.1.1版本操作1、安装AndroidSDK一开始检查无SDK安装,点击next进行安装:......
  • 封装CentOS系统几个步骤
    准备工作1.干净的操作系统镜像,推荐官方下载。2.一台linux主机,需要安装mkisofs3. kickstarts文件封装光盘1.复制文件cdiso文件所在目录mount-oloop./CentOS-6.5-......
  • 手动封装callES6
     目录前言导语 代码部分总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语手动封装callES6......