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 判断页面元素是否存在的代码
Aug 14 Javascript
javascript hashtable实现代码
Oct 13 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
domReady的实现案例
2016/11/23 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
JavaScript中数组去重的5种方法
2020/07/04 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python中的tuple元组详细介绍
2015/02/02 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
机电专业大学生求职信
2013/10/04 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
法定授权委托证明书
2014/09/27 职场文书
人工作失职检讨书
2015/05/05 职场文书
民事起诉状范文
2015/05/19 职场文书
爱国主义主题班会
2015/08/14 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
Nginx配置使用详解
2022/07/07 Servers