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

目录
  • Vue设置cookie、删除cookie、获取cookie
    • 设置cookie
    • 获取cookie
    • 删除cookie
  • Vue允许跨域携带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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在Vue中如何使用Cookie操作实例

    在Vue中如何使用Cookie操作实例

    大家好,由于公司忙着赶项目,导致有段时间没有发布新文章了.今天我想跟大家谈谈Cookie的使用.同样,这个Cookie的使用方法是我从公司的项目中抽出来的,为了能让大家看懂,我会尽量写详细点.废话少说,我们直接进入正题. 一.安装Cookie 在Vue2.0下,这个貌似已经不需要安装了.因为当你创建一个项目的时候,npm install 已经为我们安装好了.我的安装方式如下: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpa

  • vue3中cookie的详细使用过程

    目录 前言 1.vue中cookie的安装 2.登录过程中cookies的设置 3.在需要的地方拿到之前存入的cookies 总结 前言 cookie使用最多的地方想必是保存用户的账号与密码,可以避免用户每次登录时都要重新输入 1.vue中cookie的安装 在终端中输入命令npm install vue-cookies --save,即可安装cookies,安装之后在main.js文件中写下以下代码 import { createApp } from 'vue' import VueCooki

  • VUE前端cookie简单操作

    如下是简单cookie操作,当前仅限前端实例,具体内容如下 要注意的有两点: 1.cookie内容存贮的名称 2.删除cookie是通过设置过期为过去时间实现的 <body> <div id="app"> <button @click="clearCookie()"> 清除cookie </button> </div> </body> <script> let app = new V

  • web前端vue之vuex单独一文件使用方式实例详解

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用.上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个

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

    目录 Vue设置cookie.删除cookie.获取cookie 设置cookie 获取cookie 删除cookie Vue允许跨域携带cookie Vue设置cookie.删除cookie.获取cookie 在main.js中如下设置 设置cookie Vue.prototype.Setcookie = function (name,value) {   //设置名称为name,值为value的Cookie   var expdate = new Date();   //初始化时间   ex

  • Vue 设置图片不转为base64的方式

    Vue 设置图片不转为base64的方式

    目录 Vue设置图片不转为base64 vue-cli 3 .vue-cli 4  版本 vue-cli 2 版本 Vue项目base64转img 输入框 效果展示 Vue设置图片不转为base64 在使用 Vue.js 框架开发项目时,vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64. 好处:带来了更快的渲染,不会因为页面切换时还有加载图片的延迟感. 坏处:打包后的CSS,JS文件非常大,特别是图片数量多的情况下,这个问题尤为明显. vue-cli 3

  • vue项目及axios请求获取数据方式

    目录 一.首先导入用到的组件和axios 二.在data中将要用到的数据给一个初始值,为空 三.在methods中写方法,发送axios获取数据 四.传递数据 五.封装 axios axios拦截器 一般vue项目中 一个页面是由多个组件组成的,各个组建的数据都是统一在主界面的组件中发送axios请求获取,这样极大地提高了性能. 一.首先导入用到的组件和axios import HomeHeader from './components/Header' import HomeSwiper fro

  • PHP如何获取Cookie并实现模拟登录

    一.定义Cookie存储路径 必须使用绝对路径 $cookie_jar = dirname(__FILE__)."/pic.cookie"; 二.获取Cookie 将cookie存入文件 $url = "http://1.2.3.4/"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLO

  • javascript js cookie的存储,获取和删除

    使用方法: //1.存储Cookie //2.参数说明: 1.参数1:Cookie存储Name,参数2:Cookie要存储的值 //3.例子如下: setCookie('Method',match); //1.获取Cookie //2.参数说明: 1.参数1:Cookie存储的Name //3.例子如下: getCookie('Method') //1.删除Cookie //2.参数说明: 1.参数1:Cookie存储的Name //3.例子如下: deleteCookie('Method');

  • javascript设置和获取cookie的方法实例详解

    本文实例讲述了javascript设置和获取cookie的方法.分享给大家供大家参考,具体如下: 1. 设置cookie function setCookie(cookieName,cookieValue,cookieExpires,cookiePath) { cookieValue = escape(cookieValue);//编码latin-1 if(cookieExpires=="") { var nowDate = new Date(); nowDate.setMonth(n

  • jQuery获取cookie值及删除cookie用法实例

    本文实例讲述了jQuery获取cookie值及删除cookie用法.分享给大家供大家参考,具体如下: cookie在jquery中有指定的cookie操作类,这里先来介绍在使用cookie操作类时的一些问题,然后介绍正确的使用方法. 使用JQuery操作cookie时 发生取的值不正确的问题: 结果发现cookie有四个不同的属性: 名称,内容,域,路径 $.cookie('the_cookie'); // 读取 cookie $.cookie('the_cookie', 'the_value'

  • javascript操作cookie的文章(设置，删除cookies)

    下面这篇是国外的一篇文章.http://www.jb51.net/article/20553.htm 复制代码 代码如下: var sel = new Object(); var sel_num = 0; function getCookieVal(offset) { var endstr = document.cookie.indexOf(";", offset); if (endstr == -1) endstr = document.cookie.length; return u

  • vue项目实现记住密码到cookie功能示例(附源码)

    vue项目实现记住密码到cookie功能示例(附源码)

    本文介绍了vue项目实现记住密码到cookie功能示例,分享给大家,具体如下: 登陆页面 实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/删cookie实现的:每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存

随机推荐