VUE前端cookie简单操作


Posted in Javascript onOctober 17, 2017

如下是简单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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 Javascript
javascript 判断用户有没有操作页面
Oct 17 #Javascript
vue-router 路由基础的详解
Oct 17 #Javascript
如何抽象一个Vue公共组件
Oct 17 #Javascript
vue实现图书管理demo详解
Oct 17 #Javascript
基于Vue实现图书管理功能
Oct 17 #Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 #Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 #Javascript
You might like
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
Javascript缓存API
2016/06/14 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
文艺晚会主持词
2014/03/24 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
银行授权委托书样本
2014/10/13 职场文书
面试复试通知单
2015/04/24 职场文书
小学家长意见怎么写
2015/06/03 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书