之前在Django中分享了后台如何来设置Cookie的:Django实战006:Cookie设置及跨域问题处理,那么如果我们想在前端设置Cookie又该怎么来处理呢,今天为大家分享一篇vue中创建、读取、删除Cookie的方法,希望对大家有所帮助。
Cookie和localStorage的有点不同,localStorage可以看作一个对象,通过键直接获取到对应的值,而Cookie则是一串字符串,以=号区分键值,所以Cookie在设置和获取时都无法直接实现。
使用 document.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超时限制。
读取Cookie则是要将刚才拼接的字符串进行分割,并拿到我们想要的数据,多个Cookie或者参数之间用‘;’隔开,所以我们用一个数据通过split(‘;’)分割并存储起来,然后去遍历这个数组中的每组数据,找到我们想要的数据并提出出‘=’号后面的值即可,你也可以用正则来提取你想要的值 。
删除Cookie我们只要再次调用创建Cookie方法将对应的值清空即可,这里的-1让指定名为name的Cookie过期实现自动清除,如果不赋值-1的话只是将对应的Cookie值删除了,这条Cookie记录并没有被删除。
以上是我们自己封装定义的Cookie方法,如果你觉得麻烦也可以用别人的插件,如js-cookie,一款JS操作cookie的轻量级插件,直接命令行安装插件:npm i js-cookie –save,当前版本2.2.1。
在组件中引入js-cookie,通过set、get、remove等方法来实现对应的创建、获取、删除等功能,用起来还是相当的简单快捷的。
本文由知识库于2021-09-13发表在龙哥云资源网,如有疑问,请联系我们。本文链接:https://www.longgeyun.com/knowledge/3311.html
上一篇js对象的方法有哪些(js删除table指定行)
下一篇cisco路由器设置步骤图解(新手配置交换机详细教程)
高校最常见的食物中毒有哪些
急性肠胃炎与食物中毒怎么分辨
莫代尔面料和纯棉面料哪个好内裤 哪个儿童可以穿
为什么说开速腾的都不是一般人 速腾开出去有面子吗
活珠子和毛蛋的区别在哪里 哪个好吃
家里放石头的八大禁忌有哪些 家中石头最佳摆放位置
怎么判断自己帅还是丑男 男生怎样越长越帅
单身女生红绳戴左手还是右手 女生红绳戴哪里合适
Pr2020零基础快速入门
文字转语音App最新版3.0
APP下载页源码-带后台