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

相关推荐

  • “卍”和“卐”,卍和卐的区别你知道吗

    “卍”,相信不少人见过,但和它长得非常相似的“卐”,也有些人见过,但能把这二个分清楚的人恐怕不多,甚至混为一谈。今天我来告诉大家这二个字的异同之处。 一、二个字的读音相同 不管是…

    2022年 12月 13日
  • hrb335钢筋的极限强度标准值是多少

    很多小伙伴平时都能接触到HRB335这种钢筋,那么这个HRB335中335代表了什么,设计中采用的强度为300 N/mm²,又是为什么呢,有些地方还用到HRB335的极限值,那么极…

    2023年 10月 7日
  • 小说家族天才遭人陷害

    翌日,洛尘悠悠醒来,感觉头昏脑胀,浑身无力,空气中有一股刺激性气味,到处都是杂乱的稻草就知道自己是被关在了柴房。 “洛天霸你想将自己儿子送进洛神宗?我是不会让你如愿的!”洛尘目中闪…

    综合百科 2023年 3月 13日
  • 魔兽世界大地的裂变时空漫游坐骑

    作者:NGA-法伊CCG 本来每次漫游的时候都会做声望攻略,奈何这次声望坐骑的就2个,顺便把剩下的5个声望攻略也做了。 由于漫游周有提高百分之50的加成,参考以前的声望攻略发现有一…

    2022年 11月 5日
  • ffffff

    世界冠军杯赛目前已经圆满结束了,重庆QGhappy或许不是KPL赛区人气最高的战队(最近这几年都是成都AG超玩会人气最高),但是他们绝对算得上是人气最高战队之一,因为他们是KPL赛…

    2022年 11月 27日
  • 注射式植筋胶的使用

    注射式植筋胶流程 1.测量放线: 按设计要求确定植筋位置,对植筋部位放线定位,作好标记,同时还应全面了解砼结构内钢筋分布情况,砼保护层厚度等,以避免钻孔时过度破坏。 2.钻孔: 钻…

    2023年 9月 6日
  • 2022上半年英语四六级报名时间

    长江日报记者从湖北省教育考试院获悉,2022年上半年全国大学英语四、六级考试笔试和口试将分别于6月11日和5月21至22日举行。其中,笔试于6月11日上午开考四级(英语、日语、德语…

    2022年 11月 16日
  • 花一半时间学习上清华?听雨果奖得主郝景芳谈学习方法

    只花一半时间学习就能上清华,只有聪明的学生才能办到吗?当我们把这个问题抛给科幻大奖雨果奖的作者郝景芳时,她为我们做了详细剖析。 郝景芳,毕业于清华大学物理系,2006-2008年就…

    2022年 11月 5日
  • 美国电影《合伙人》(美剧合伙人冷战疑云杰克)

    那年夏天,TNT重拳出击,推出了三集重磅电影电视剧 《Company 合伙人》。 该作品海报之一 它是根据畅销历史小说《Company 合伙人》改编的同名电视剧。中立视角模糊所谓的…

    2023年 12月 9日
  • 骗术的高明在于用什么方式忽悠,别人上当

    什么叫做忽悠?为什么会有无数人上当受骗?一切骗术根源都在下文。 短信:“某某某,28岁,肤白貌美,因丈夫车祸意外无法生育,为继承家业和维护家族形象,特寻异地品正健康男士,圆我母亲梦…

    2022年 11月 16日