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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

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

  • 详解Vue用axios发送post请求自动set cookie

    详解Vue用axios发送post请求自动set cookie

    vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true

  • VUE前端cookie简单操作

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

  • Yii框架学习笔记之session与cookie简单操作示例

    本文实例讲述了Yii框架学习笔记之session与cookie操作.分享给大家供大家参考,具体如下: session操作 <?php namespace app\controllers; use yii\web\Controller; class HelloController extends Controller{ public function actionIndex(){ //把session当做对象 $session = \yii:$app->session; if($session-

  • vue前端和Django后端如何查询一定时间段内的数据

    vue前端和Django后端如何查询一定时间段内的数据

    前言 在开发过程中经常会遇到筛选查询之类的功能,比如查询某一个时间段内的数据而非所有数据. 这样我们就需要向后端发送时间段的参数,然后在后端处理查询. 这里以Django后端和vue前端的简单例子来记录大致实现. 后端数据库 这里是一些简单的数据重要的是date,我们需要根据日期来筛选返回到前端. models.py class CountDownSign(models.Model): name = models.CharField(max_length=1000) date = models.

  • vue服务端渲染操作简单入门实例分析

    本文实例讲述了vue服务端渲染操作.分享给大家供大家参考,具体如下: 想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务端渲染到底是杂么回事!!! 一,首先实现下官网的基本案例 随便建一个目录,然后执行npm init初始化项目,生成工程文件package.json:创建server.js:然后按照vue-ssr官方链接:https://ssr.v

  • vue中后端做Excel导出功能返回数据流前端的处理操作

    项目中有一个导出功能的实现,用博客来记录一下.因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来. 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台返回的数据流,一堆看不懂的乱码: 接下来要处理这堆乱码,因为用到的地方多,所以在util.js文件里封装了一个公共方法并抛出: 虽然vue里有封装好的请求接口的方法,但这里要单独用axios,所以先在util.js里引入axios import

  • Vue+element+cookie记住密码功能的简单实现方法

    实现功能: 1.登录时勾选记住密码,用cookie保存账号和密码并对密码进行两次加密处理(纯前端),下次登录自动输入账号密码 2.登录时不勾选,清空cookie,下次登录需要输入 效果图: ===========================================================================================================================================================

  • vue增删改查的简单操作

    vue增删改查的简单操作

    本文为大家分享了vue增删改查的简单操作,供大家参考,具体内容如下 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', province: '河北省'

  • 搭建element-ui的Vue前端工程操作实例

    一.安装npm镜像 (1)下载node.js, 配置node.js的环境变量 检测PATH环境变量是否配置了Node.js,点击开始=>运行=>输入"cmd" => 输入命令"path" 检查Node.js版本 在命令窗口输入:npm install -g cnpm –registry=https://registry.npm.taobao.org 二.安装全局vue-cli (1)npm install -g vue-cli 回车,验证是否安装成

  • Java 模拟cookie登陆简单操作示例

    本文实例讲述了Java 模拟cookie登陆简单操作.分享给大家供大家参考,具体如下: 最近在做将禅道上的功能接口做到手机端,在做登陆的时候,看了禅道的源码,是由cookie来登陆,所以要做一个模拟cookie登陆的接口,将拿到的cookie放到每次接口请求的头部中去,就可以正常访问了. import java.io.OutputStreamWriter; import java.net.HttpURLConnection; import java.net.URL; /** * @Author:

  • VUE前端从后台请求过来的数据进行转换数据结构操作

    我就废话不多说了,大家还是直接看代码吧` let label(){ let _this = this; let _offset = (_this.pagination.currentPage - 1) * _this.pagination.pageSize let params ={ offset:_offset,//分页偏移量 limit:_limit,//分页查询数量 } labelView(",params).then(res=>{ _this.list = res.data.dat

随机推荐