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命名冲突解决的五种方案分享
Mar 16 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
10分钟学会js处理json的常用方法
Dec 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
php+ajax制作无刷新留言板
2015/10/27 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
django使用LDAP验证的方法示例
2018/12/10 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Django工程的分层结构详解
2019/07/18 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
python如何设置静态变量
2020/09/07 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
五五普法心得体会
2014/09/04 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
python中的random模块和相关函数详解
2022/04/22 Python