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 相关文章推荐
深入理解Javascript中的循环优化
Nov 09 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
使用Vue实现一个树组件的示例
Nov 06 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
php常用图片处理类
2016/03/16 PHP
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
javascript版2048小游戏
2015/03/18 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python ldap实现登录实例代码
2016/09/30 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
小学防溺水制度
2014/01/29 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
企业法人代表证明书
2014/09/27 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
Nginx域名转发使用场景代码实例
2021/03/31 Servers
js 实现验证码输入框示例详解
2022/09/23 Javascript