vue中设置、获取、删除cookie的方法

 更新时间:2018年09月21日 11:33:57   作者:tiantiandashi  
今天小编就为大家分享一篇vue中设置、获取、删除cookie的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

1、在src目录下的access下新建一个cookie.js,

内容如下:

export function setCookie(c_name,value,expire) {
 var date=new Date()
 date.setSeconds(date.getSeconds()+expire)
 document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()
 //console.log(document.cookie)
}
 
export function getCookie(c_name){
 if (document.cookie.length>0){
  let c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1){ 
   c_start=c_start + c_name.length+1 
   let c_end=document.cookie.indexOf(";",c_start)
   if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
   } 
  }
 return ""
}
 
export function delCookie(c_name){
 setCookie(c_name, "", -1)
}

2、在main.js中引入并且将cookie设置成vue的全局变量

3、这样,在登录或退出等页面上就可以调用$cookieStore这个全局变量来使用

// 将用户名存进cookie,第三个参数60为秒,意味着一分钟后cookie自动消失。一天为 86400 s
 this.$cookieStore.setCookie( 'username' ,this.username,60);

以上这篇vue中设置、获取、删除cookie的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现评论列表

    vue实现评论列表

    这篇文章主要为大家详细介绍了vue实现评论列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue的webcamjs集成方式

    vue的webcamjs集成方式

    这篇文章主要介绍了vue的webcamjs集成方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • elementui中el-input回车搜索实现示例

    elementui中el-input回车搜索实现示例

    这篇文章主要介绍了elementui中el-input回车搜索实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue-quill-editor插入图片路径太长问题解决方法

    vue-quill-editor插入图片路径太长问题解决方法

    这篇文章主要介绍了vue-quill-editor插入图片路径太长问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue-cli脚手架打包静态资源请求出错的原因与解决

    vue-cli脚手架打包静态资源请求出错的原因与解决

    这篇文章主要给大家介绍了关于vue-cli脚手架打包静态资源请求出错的原因与解决方法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue-cli具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 如何在vue中使用video.js播放m3u8格式的视频

    如何在vue中使用video.js播放m3u8格式的视频

    这篇文章主要介绍了如何在vue中使用video.js 播放m3u8格式的视频,帮助大家更好的理解和学习使用vue,感兴趣的朋友可以了解下
    2021-02-02
  • vue中el-table合并列的具体实现

    vue中el-table合并列的具体实现

    本文主要介绍了vue中el-table合并列的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue中form表单禁用专用组件介绍

    vue中form表单禁用专用组件介绍

    这篇文章主要介绍了vue中form表单禁用专用组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue之带参数跳转打开新页面、新窗口

    vue之带参数跳转打开新页面、新窗口

    这篇文章主要介绍了vue之带参数跳转打开新页面、新窗口方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 详解vue cli中如何使用自定义的组件

    详解vue cli中如何使用自定义的组件

    Vue CLI是一个强大的开发工具,可用于快速搭建Vue.js项目,在Vue CLI中使用自定义组件是构建交互式和模块化Web应用的重要一环,下面我们就来看看vue cli中如何使用自定义的组件吧
    2023-11-11

最新评论