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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
基于Vue实现timepicker
Apr 25 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
五步轻松实现zTree的使用
Nov 01 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
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
再谈JavaScript线程
2015/07/10 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
对Python _取log的几种方式小结
2019/07/25 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
sort命令的作用和用法
2013/08/25 面试题
车贷收入证明范本
2014/01/09 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
教师辞职信范文
2015/02/28 职场文书
用python自动生成日历
2021/04/24 Python