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来实现动画导航效果的代码
Dec 16 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
js 轮播效果实例分享
Dec 28 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
PHP7新特性
2021/03/09 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
js tab效果的实现代码
2009/12/26 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python使用wxPython实现计算器
2018/01/30 Python
python中的列表与元组的使用
2019/08/08 Python
python验证码图片处理(二值化)
2019/11/01 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
文职个人求职信范文
2013/09/23 职场文书
医院实习接收函
2014/01/12 职场文书
求职教师自荐书
2014/06/19 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
大学生个人总结范文
2015/02/15 职场文书
班级管理经验交流材料
2015/11/02 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js