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

相关推荐

  • 推蛋蛋1113好看小说合集,虐心十足,爱而不得!

    《心坟》~~~~~~~~~~~ 《天亮了,说再见》~~~~~~ 《双恋》~~~~~~~~~~~ 《只婚不爱》~~~~~~~~~ 《织心》~~~~~~~~~~~ 《左眼》~~~~~~…

    2022年 12月 14日
  • 《诗经》的名称、性质、分类、内容和艺术特点、以及句式和章法

    《诗经 》的名称、性质 《诗经》是我国第一部诗歌总集,原名《诗》或“诗三百”,共有305篇,另外有6篇笙诗, 有目无词。全书主要收集了周初至春秋中叶五百多年的间的作品。 古有“采诗…

    2022年 11月 5日
  • 基层军医能到部队医院吗

    7月25日,解放军总医院第七医学中心全科医师规范化培训基地帮建北京市首家军队基层全科军医实践基地正式启动。来自中国医师协会和军队基层干休所、门诊部、陆军某旅等单位的领导、专家和基层…

    综合百科 2022年 11月 22日
  • 勾践卧薪尝胆,三千越甲可吞吴什么意思

    文:王建斌 读史专栏作家 勾践,春秋时期越国国君,夏禹的后裔,越王允常之子。公元前496年继位,同年大败吴师,之后在公元前494年被吴军大败于夫椒,被迫向吴国求和,被俘后隐忍不发,…

    2023年 3月 20日
  • 5本古代温馨种田文推荐

    春天到了,正适合踏青感受田园风光的魅力啦! 所以今天来五本温馨有趣的古代种田文推荐,献给喜欢阅读的书友们! 主角:精明能干女主VS痞帅机灵男主。 简介:女主是从末世穿越到古代,凭着…

    2022年 12月 28日
  • 女人保持住这3种状态,男人会爱惨你吗

    我曾经有一段还没开始就结束了的感情,那时的我很喜欢对方,再加上女生本来就比较感性。 所以得知他似乎也对我有好感后,内心就更加开心了。 每天总期待他给我发信息,如果他没有和我发信息,…

    2022年 11月 5日
  • “两弹一星”主要专家有一半出自高级知识分子家庭,多数来自江浙

    “两弹一星”是指我国20世纪50年代、60年代时为了抵制帝国主义的侵害与核讹诈所采取的科研决策。 这一决策旨在通过我国无数科研家的科研手段打造出属于我国的核弹、导弹与人造卫星,提升…

    2022年 11月 5日
  • 军令状和投名状的区别

    文 | 江隐龙 源于中华法系的断裂与“欧风美雨”的浸染,中国传统中的大多数法律制度、惯例、用语都已消失于大众视野,成为历史名词。然而文化的传承往往会在细微处留下印痕,即便在白话文一…

    2023年 2月 18日
  • 7夕是几月几号2020

    2020年中国情人节是8月几号?大家都知道2月14日是西方传统的情人节,现在已经被全世界广泛接受。那么2020中国情人节是哪一天?今天婚博会小编就为大家详细介绍下2020中国情人节…

    2022年 12月 16日
  • 飞信从哪一年开始推出

    【手机之家新闻】中国移动近日发布公告宣布调整和飞信业务,自 9 月 30 日开始停止提供该服务。公告显示,和飞信将从 2022 年 9 月 30 日开始停止提供服务,届时将无法登陆…

    2022年 11月 23日