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 tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
原生js封装运动框架的示例讲解
Oct 01 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 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
ThinkPHP的I方法使用详解
2014/06/18 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
js实现图片轮播效果
2015/12/19 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
python安装教程 Pycharm安装详细教程
2017/05/02 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
加拿大探亲邀请信
2014/01/28 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
学生打架检讨书
2014/10/20 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
个人求职意向书
2015/05/11 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
教研活动主持词
2015/07/03 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL