当前位置:首页 > vue.js技术文章 > vue中设置、获取、删除cookie的方法

vue中怎样设置、获取、删除cookie

  • 发布时间:
  • 作者:码农之家原创
  • 点击:113

这篇文章主要知识点是关于vue、设置、获取、删除cookie、cookie、VUE前端cookie简单操作 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

Vue.js实战

尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅

查看详情

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

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

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

内容如下:

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的全局变量

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

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

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

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

VUE前端cookie简单操作

如下是简单cookie操作,当前仅限前端实例,具体内容如下

要注意的有两点:

1、cookie内容存贮的名称
2、删除cookie是通过设置过期为过去时间实现的

<body>
<div id="app">
 <button @click="clearCookie()">
 清除cookie
 </button>
</div>
</body>
<script>
 let app = new Vue({
 el: "#app",
 data: {
 },
 created: function () {
  this.checkCookie();
 },
 methods: {
  //设置cookie
  setCookie: function (cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  console.info(cname + "=" + cvalue + "; " + expires);
  document.cookie = cname + "=" + cvalue + "; " + expires;
  console.info(document.cookie);
  },
  //获取cookie
  getCookie: function (cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
   var c = ca[i];
   while (c.charAt(0) == ' ') c = c.substring(1);
   if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
  }
  return "";
  },
  //清除cookie
  clearCookie: function () {
  this.setCookie("username", "", -1);

  },
  checkCookie: function () {
  var user = this.getCookie("username");
  if (user != "") {
   alert("Welcome again " + user);
  } else {
   user = prompt("Please enter your name:", "");
   if (user != "" && user != null) {
   this.setCookie("username", user, 365);
   }
  }
  }
 }
 })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vuex的实例用法教程、 vue中的watch监听数据变化及、 Vue2实现组件props双向绑定、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:Vue.js结合Ueditor富文本编辑器知识点讲解

下一篇:vue2.0组件之间传值、通信的方式总结

展开 +

收起 -

设置、获取、删除cookie 学习笔记
网友NO.245186

vue通过cookie获取用户登录信息的思路详解

思路 进入页面 若未登录,跳转至登陆页面 若已登录,从cookie中获取用户信息,并执行后续操作 2. 登录页面,存入cookie(setCookie) import {setCookie,getCookie}from 'src/js/cookieUtil' methods: { async cheack_n_p () { if( this.checkCode === this.pwd) { this.loginData = await getUserInfo(this.uname, this.pwd, this.adminPhone); if (this.loginData.res !== 0) { setCookie('userName',this.uname); setCookie('userPwd',this.pwd,); setCookie('phone',this.uname); setCookie('userId',this.loginData.obj.id); setCookie('userType',this.loginData.obj.userType); setCookie('adminPhone',this.adminPhone);// this.$router.go(-1); this.$router.replace('/'); } else { alert("验证码错误!") } } }, //验证手机号码部分 async sendcode(){ var pattern = /^0{0,1}(1[0-9][0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, str =this.uname; if (!pattern.test(str)) { alert('请正确输入手机号!'); return ; } this.time=60; this.disabled=true; this.timer(); this.checkCode = (a……

网友NO.490428

vue项目使用axios发送请求让ajax请求头部携带cookie的方法

最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录。检查发现是vue项目中使用axios发送ajax请求导致的。查看文档得知axios默认是不让ajax请求头部携带cookie的,因此,在main.js中设置如下: import axios from 'axios'axios.defaults.withCredentials=true;//让ajax携带cookieVue.prototype.$axios = axios; 这样请求头就可以带着设置好的cookie向后台发送请求了,这样初级的登录权限就可以验证了。 如有疑问,欢迎随时交流。 以上这篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.810664

基于Vue 服务端Cookies删除的问题

一般在我们做项目时,我们都会通过POST请求拿到服务器给到的set-Cookies,保存在浏览器的Cookie里 这里需要明确一点。缓存有三类 cookie、 sessionStorage 、localStorage cookie: 存储在用户本地终端上的数据。有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。 另外两种是HTML5提供的: 不参与和服务器的通信; localStorage - 没有时间限制的数据存储,第二天、第二周或下一年之后,数据依然可用。 sessionStorage- 浏览器会话关闭就跟随消失 那么了解完这三种后,在实际开发过程中服务端给的Cookie在本地测试开发时是可以被删除的。 然而在项目中 放在服务器时,请求回来的Cookie是不能被删除的。 若想删除,此时我们只能设置 和 获取 两种办法。 博……

网友NO.859808

vue中使用cookies和crypto-js实现记住密码和加密的方法

使用crypto-js加解密 第一步,安装 npm install crypto-js 第二步,在你需要的vue组件内import import CryptoJS from "crypto-js"; 第三步,使用 // Encrypt 加密 var cipherText = CryptoJS.AES.encrypt( "my message", "secretkey123" ).toString(); console.log(cipherText) // Decrypt 解密 var bytes = CryptoJS.AES.decrypt(cipherText, "secretkey123"); var originalText = bytes.toString(CryptoJS.enc.Utf8); console.log(originalText); // 'my message' 注意这个mymessage是字符串,如果你要加密的用户id(number类型)得先转成字符串 更多使用请访问官方文档 记住密码 实现原理是登录的时候,如果勾选了记住密码(把‘记住密码'状态保存到localstorage)就保存账号密码到cookies; 之后进入登录页面的时候,判断是否记住了密码(从localstorage判断),如果记住密码则导出cookies到表单; 其中保存使用setcookie方法,取出则使用getcookie方法。 ok,我们来编写方法……

网友NO.955728

解决前后端分离 vue+springboot 跨域 session+cookie失效问题

环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端。 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查。后续请求取出的用户都为null。 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了。然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无法保存,而且就算保存了域名不同也不能携带。 第一步: 后台添加过滤器,因为前后端分离,不可能每个方法都写一遍,所以添加过滤器统一处理。 package com.test.filter;import javax.servlet.*;import javax.servlet.annotation.WebFilter;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebFilter(urlPatterns = "/*", filterName = "CORSFilter")public c……

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757