前端Vue设置cookie、删除cookie,获取cookie方式

 更新时间:2022年10月24日 15:43:15   作者:PairsNightRain  
这篇文章主要介绍了前端Vue设置cookie、删除cookie,获取cookie方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue设置cookie、删除cookie、获取cookie

在main.js中如下设置

设置cookie

Vue.prototype.Setcookie = function (name,value) {
  //设置名称为name,值为value的Cookie
  var expdate = new Date();   //初始化时间
  expdate.setTime(expdate.getTime() + 30 * 60 * 1000);   //时间单位毫秒
  document.cookie = name + "=" + escape(value) + ";expires=" + expdate.toGMTString() + ";path=/";
  //即document.cookie= name+"="+value+";path=/";  时间默认为当前会话可以不要,但路径要填写,因为JS的默认路径是当前页,如果不填,此cookie只在当前页面生效!
}

获取cookie

Vue.prototype.getcookie = function (a){
  // console.log(a)
  var d;
  var b = document.cookie;
  // console.log(b)
  var c = b.split(";");
  for (let e = 0; e < c.length; e++) {
    var f = c[e].split("=");
    if (a == f[0].toString().trim()) {
      d = f[1];
      break;
    }
  } if (void 0 == d || null == d) {
    return "";
  }
  else {
    var g = unescape(d.trim());
    return g;
  }
}

删除cookie

Vue.prototype.delCookie= function (a){
      var b = new Date(0).toGMTString();
      document.cookie = a + "=;expires=" + b + ";path=/";
    },

Vue允许跨域携带cookie

import axios from 'axios'
axios.defaults.withCredentials = true;// 允许跨域携带cookie

或者在请求拦截器中添加

config.headers['Access-Control-Allow-Credentials']=true

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue 设置axios请求格式为form-data的操作步骤

    Vue 设置axios请求格式为form-data的操作步骤

    今天小编就为大家分享一篇Vue 设置axios请求格式为form-data的操作步骤,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue2 对全局自定义指令一次性进行注册的方法

    vue2 对全局自定义指令一次性进行注册的方法

    这篇文章主要介绍了vue2 对全局自定义指令一次性进行注册,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • vue选项卡Tabs组件实现示例详解

    vue选项卡Tabs组件实现示例详解

    这篇文章主要为大家介绍了vue选项卡Tabs组件实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue声明式导航与编程式导航示例分析讲解

    Vue声明式导航与编程式导航示例分析讲解

    这篇文章主要介绍了Vue中声明式导航与编程式导航,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    vue2.0路由切换后页面滚动位置不变BUG的解决方法

    下面小编就为大家分享一篇vue2.0路由切换后页面滚动位置不变BUG的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue3 defineModel的使用示例详解

    Vue3 defineModel的使用示例详解

    文章介绍了vue中向子组件传值并允许修改的机制,通过defineModel实现双向绑定,它返回一个ref,并且可以配置底层prop的选项,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2025-01-01
  • vue/react单页应用后退不刷新方案

    vue/react单页应用后退不刷新方案

    本文主要介绍了vue/react单页应用后退不刷新方案,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue之proxyTable代理超全面配置流程

    vue之proxyTable代理超全面配置流程

    这篇文章主要介绍了vue之proxyTable代理超全面配置流程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue混入mixin使用特点

    vue混入mixin使用特点

    混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-12-12
  • vue树形结构获取键值的方法示例

    vue树形结构获取键值的方法示例

    这篇文章主要介绍了vue树形结构获取键值的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论