vue设置cookie和获取cookie

前言

之前在Django中分享了后台如何来设置COOKIE的:Django实战006:COOKIE设置及跨域问题处理,那么如果我们想在前端设置COOKIE又该怎么来处理呢,今天为大家分享一篇vue中创建、读取、删除COOKIE的方法,希望对大家有所帮助。

Vue实战045:COOKIE的创建、读取、删除

COOKIE的形式

COOKIE和localStorage的有点不同,localStorage可以看作一个对象,通过键直接获取到对应的值,而COOKIE则是一串字符串,以=号区分键值,所以COOKIE在设置和获取时都无法直接实现。

//localStorage//设置方式localStorage.setItem('test1',value1) //展现形式为对象{ 'test1':'value1', 'test2':'value2}//获取方式this.ip=localStorage.getItem('test1')//COOKIE//设置方式document.COOKIE='test1=value1';//展现形式为字符串"test1=value1 ; test2=value2";//获取方式document.COOKIE

封装COOKIE方法

使用 document.COOKIE 属性来创建 、读取、及删除 COOKIE,为了能快速的处理COOKIE,我们将其常用的方法封装起来,比如设置,获取和删除。这里我们只要在使用的时候直接调用该方法即可快速实现对COOKIE的处理。

创建COOKIE

COOKIE是一串字符串,每个属性之间用‘;’隔开,属性间以‘=’号为区分,类型格式如 COOKIE1=value; COOKIE2=value; COOKIE3=value;所以这里我们要做的就是将用户输入的对应参数按照COOKIE的类型格式进行拼接。COOKIE中共包含9个参数,分别是Name、Value、Domain、Path(默认‘/’)、Expires/Max-Age、Size(COOKIE大小)、HTTP、Secure、SameSite。设置COOKIE必须包含Nane和Value,其他的允许为空,一般我们会多添加个Expires/Max-Age超时限制。

setCOOKIE(name,value,expire){ let d=new Date() //实例化Date d.setDate(d.getDate()+expire) //设置超时时间 window.document.COOKIE = name + "=" + value +';expires='+d.toGMTString() },

读取COOKIE

读取COOKIE则是要将刚才拼接的字符串进行分割,并拿到我们想要的数据,多个COOKIE或者参数之间用‘;’隔开,所以我们用一个数据通过split(‘;’)分割并存储起来,然后去遍历这个数组中的每组数据,找到我们想要的数据并提出出‘=’号后面的值即可,你也可以用正则来提取你想要的值 。

//方法一getCOOKIE(name){ var arry =document.COOKIE.split(';') console.log("arry=",arry) for(let i=0;i<arry.length;i++){ let temp =arry[i].trim().split('=') if(temp.indexOf(name)==0) return temp[temp.indexOf(name)+1] } return null},//方法二,正则getCOOKIE(name){ var temp = document.COOKIE.match('(^|;) ?' + name + '=([^;]*)(;|$)') return temp ? temp[2] : null},

删除COOKIE

删除COOKIE我们只要再次调用创建COOKIE方法将对应的值清空即可,这里的-1让指定名为name的COOKIE过期实现自动清除,如果不赋值-1的话只是将对应的COOKIE值删除了,这条COOKIE记录并没有被删除。

delCOOKIE(name){ this.setCOOKIE(name,'',-1)},

js-COOKIE插件

以上是我们自己封装定义的COOKIE方法,如果你觉得麻烦也可以用别人的插件,如js-COOKIE,一款JS操作COOKIE的轻量级插件,直接命令行安装插件:npm i js-COOKIE –save,当前版本2.2.1。

Vue实战045:COOKIE的创建、读取、删除

js-COOKIE使用

在组件中引入js-COOKIE,通过set、get、remove等方法来实现对应的创建、获取、删除等功能,用起来还是相当的简单快捷的。

//引入import COOKIEs from 'js-COOKIE'//创建COOKIEs.set('name',value)COOKIEs.set('name', 'value', { expires: number });//获取COOKIEs.get() //获取所有COOKIECOOKIEs.get('name') //获取指定COOKIE//删除COOKIEs.remove('name')

欢迎关注本人的公众号:编程手札,文章也会在公众号更新

Vue实战045:COOKIE的创建、读取、删除

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2022年 11月 14日 下午1:22
下一篇 2022年 11月 14日 下午1:31

相关推荐

  • 黄永玉为酒鬼酒作的画

    说起湘西的酒鬼酒,那就得说黄永玉。他为了让家乡的经济发展,亲自设计包装,书写酒名,并配以妙趣无穷的画面,使得酒鬼酒名扬天下。 下面我们来看一下黄老的这些字画,感受一下他的幽默智慧,…

    2023年 6月 30日
  • 一窝可爱小猫找领养

    20日14时,由市公安局治安管理支队、哈尔滨领养日、哈尔滨犬业协会联合承办的第22届哈尔滨宠物领养日活动举行,22只“小可爱”吸引了众多爱心人士。当日共收到32份申请书,工作人员将…

    2022年 12月 2日
  • 论书法创作主体与文字内容的互动关系

    刘 春/文 摘 要:书写内容与书法艺术创作之间存在着内在的关联:首先,内容影响主体创作心理,使作品具有个性品质;其次,书法作品能够能动地反映文字语境和主体的精神气质,两者的相互生发…

    2023年 10月 5日
  • 穿越火线终身荣誉会员名单

    终身荣誉会员是穿越火线对于那些贡献极为突出的玩家的一种至高荣誉奖励,获得此殊荣的玩家拥有以下权益: 永久”CF VIP” “终身荣誉会员&#82…

    2024年 1月 8日
  • 卷发棒卷发伤头发吗

    一头美美的卷发总是能让mm们很心动,但mm们又不想去烫卷发,因为很伤害发质。不过,自从有了卷发棒之后,很多mm就在家做自己的卷发了,既快捷又省心。那么问题来,卷发棒伤头发吗?想知道…

    2022年 11月 29日
  • 郑州街舞培训

    联合文化舞蹈 三年磨一剑 致力于打造中原地区顶端舞蹈演艺市场, 跳街舞以前在所有人眼里都是不务正业, 随着文化的发展 ,街舞渐渐走入大众的视野, 所有的文艺活动及各大卫视开始有越来…

    2022年 11月 30日
  • 个人日常收支记账表

    没有记账的小伙伴是不是有一种感觉,钱在不知不觉中就花完了,不清楚花在那些地方,当你记账之后每一笔开销都记录的清清楚楚可以更好的避免掉不需要的开销,下面小编就教大家一个记录开销的方法…

    2022年 12月 1日
  • 贝纳利tornado302质量

    前两天贝纳利正式发布了新款的飓风302,并以Tornado302的全新命名正式回归品牌,当然售价也回到了起初的29800元,在这个国产品牌降价的大潮,就有人质疑贝纳利是不是飘了? …

    2023年 1月 12日
  • 《盗墓笔记》黑瞎子的眼睛究竟是怎么回事?明明是瞎子却能看到

    近日,由朱一龙和胡军等人主演的《盗墓笔记·重启》正在热播中。 虽然说改编成影视剧的《盗墓笔记》反响没有《鬼吹灯》好,但该系列的影视剧一直都在努力中。 这次《重启》上映让观众重新认识…

    2022年 11月 7日
  • 摩拜押金退了美团可以用吗

    IT之家8 月 4 日消息,2018 年 4 月, 美团以 27 亿美元的价格全资收购摩拜单车, 2019 年初,摩拜表示将全面逐步接入美团 App,2020 年底,摩拜 App、…

    2022年 12月 14日