js-cookie使用方法

该插件解决了原生js操作cookie的麻烦

js-cookie使用方法

js-cookie用来处理cookie相关的插件,非常简单好用,下面简单记录一下:

1、项目中引用:

npm install --save js-cookie

2、js-cookie的使用:

安装好js-cookie插件后,在我们需要处理cookie的地方,简单的通过import引入就可以使用了

import Cookies from 'js-cookie'

3、js-cookie的増、查、删

添加cookie

// 创建一个名称为name,对应值为value的cookie,由于没有设置失效时间,默认失效时间为该网站关闭时
Cookies.set(name, value)// 创建一个有效时间为7天的cookie
Cookies.set(name, value, { expires: 7 })// 创建一个带有路径的cookie
Cookies.set(name, value, { path: '' })// 创建一个value为对象的cookie
const obj = { name: 'ryan' }
Cookies.set('user', obj)

需要注意的是,通过Cookies.set(name, value)添加cookie时,即使添加时的value值类型为number,添加后获取到的value值的类型会被转换成string类型。

cookie添加后,所有的请求接口都会自动带上cookie值,如果没有设置cookie的失效时间,默认就是该网站关闭时cookie失效。

获取cookie

// 获取指定名称的cookie
Cookies.get(name) // value// 获取value为对象的cookie
const obj = { name: 'ryan' }
Cookies.set('user', obj)
JSON.parse(Cookies.get('user'))// 获取所有cookie
Cookies.get()

获取cookie时,如果cookie中不存在该名称对应的记录,则会返回undefined。当value为对象时,获取的cookie需要通过JSON.parse()解析

删除cookie

// 删除指定名称的cookie
Cookies.remove(name) // value// 删除带有路径的cookie
Cookies.set(name, value, { path: '' })
Cookies.remove(name, { path: '' })

删除带有路径path的cookie时,不能通过简单的Cookies.remove(name)进行删除,需要带上路径

参考文献:

Cookie的使用(js-cookie插件)
js-cookie

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406673.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WindowsXP命令行修改服务启动选项

1、修改服务启动类型;使用命令sc,命令使用方法见下例:sc config messenger displayname "messenger" start auto说明:messenger:所要操作的服务名称displayname "messenger":所要操作的服务名称显示出来的名称…

Python 文件读和写

转载于:https://www.cnblogs.com/nzyjlr/p/4157582.html

element-ui 设置菜单栏展开

element-ui 侧边栏默认要全部展开怎么做&#xff1f; element-ui文档中是这么写的 default-openeds 当前打开的sub-menu的key数组 给标签加上这个属性 <el-menu class"el-menu-vertical" open"handleOpen" close"handleClose" theme"…

删除列表中满足一定条件的元素

从列表中删除满足一定条件的元素。 如&#xff1a;删除一个列表中长度为0的元素&#xff0c;或者删除列表中同时是2和3的倍数的元素。 做过高级语言编程的人想当然的会认为“这很简单”&#xff0c;可以如下面的方式来实现&#xff1a; for i in listObj:if(...):listObj.rem…

简单JS实现走马灯效果的文字(无需jQuery)

效果类似&#xff1a;(抱歉&#xff0c;图片是静态的) 写一段html&#xff0c;需要走马灯上下跳动的内容&#xff0c;但每次只显示一行&#xff1a;<hr size"0" align"center" style"border-top: 1px solid #F5F5F5;"/> <div id"m…

Android Service 生命周期

Android Service的生命周期 Managing the Lifecycle of a Service service的生命周期&#xff0c;从它被创建开始&#xff0c;到它被销毁为止&#xff0c;可以有两条不同的路径&#xff1a; A started service 被开启的service通过其他组件调用 startService()被创建。 这种ser…

Python正则表达式如何进行字符串替换

先来段网上的知识&#xff1a;http://developer.51cto.com/art/201003/188824.htm Python正则表达式在使用中会经常应用到字符串替换的代码。有很多人都不知道如何解决这个问题&#xff0c;下面的代码就告诉你其实这个问题无比的简单&#xff0c;希望你有所收获。 1.替换所有匹…

[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.

在基于 Element-ui 写项目的时候&#xff0c;Chrome 提醒&#xff1a; [Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive. 翻译过来如下&#xf…

ubuntu下集群设置静态ip

hadoop集群时&#xff0c;需要固定集群内计算机相互通信之间的ip地址&#xff0c;但是每次进行网络连接后&#xff0c;ip地址都是变换的&#xff0c;我们希望设置一个用于集群内通信的静态ip&#xff0c;即使重启电脑也不会变化&#xff0c;同样希望能够正常的访问互联网。 sud…

新书出版:《Android深度探索(卷1):HAL与驱动开发》

《Android深度探索&#xff08;卷1&#xff09;&#xff1a;HAL与驱动开发》【1】亚马逊【2】当当网【3】京东商城【4】互动网【5】淘宝网【6】豆瓣网 《 Android深度探索&#xff08;卷1&#xff09;&#xff1a;HAL与驱动开发》分为4篇&#xff0c;分别从搭建开发环境&#x…

python对时间日期做格式化

From: http://www.cnblogs.com/65702708/archive/2011/04/17/2018936.html Python格式化日期时间的函数为datetime.datetime.strftime()&#xff1b;由字符串转为日期型的函数为&#xff1a;datetime.datetime.strptime()&#xff0c;两个函数都涉及日期时间的格式化字符串&…

element-ui中表单验证rules

我们在项目中头疼的是什么&#xff1f;对&#xff0c;你没有听错&#xff0c;就是表单验证&#xff0c;各种非空校验&#xff0c;正则校验等等 而初次使用element-ui&#xff0c;在做表单验证的时候&#xff0c;由于项目急&#xff0c;自己呢&#xff0c;也没有时间去研究这个…

图像熵的意义以及计算

熵&#xff08;entropy&#xff09;指的是体系的混乱的程度&#xff0c;它在控制论、概率论、数论、天体物理、生命科学等领域都有重要应用&#xff0c;在不同的学科中也有引申出的更为具体的 定义&#xff0c;是各领域十分重要的参量。熵由鲁道夫克劳修斯&#xff08;Rudolf C…

python,时间加减,时间计算,时间格式化,时间提取汇总

From: http://bbs.chinaunix.net/thread-1371304-1-1.html 不知道这么写题目会不会让人误会&#xff0c;不过这个题目可以让从搜索引擎上搜索问题的菜鸟们一下找到这篇帖子 这篇是集合了N多大大的方法 上半部是时间加减 下半部是格式化 感谢 xiaoyu9805119 carrison 3227049 …

验证视图状态 MAC 失败

验证视图状态 MAC 失败。如果此应用程序由网络场或群集承载&#xff0c;请确保 <machineKey> 配置指定了相同的 validationKey 和验证算法。不能在群集中使用 AutoGenerate解决方法&#xff1a;这种错误一般是因为在网页代码中有浏览器不支持的标签或标签的位置放置不正确…

async-validator 表单验证两种数据的解决方案

上问题&#xff1a; 下面选项中后台给的value 有 number和 string 两种导致无法验证 解决方案 rules: [,{type: "string",required: true,message: 编码项目至少一项,trigger: change,transform(value) {var baseif(value){//在select中转换要加这个判断//因为sele…