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 相关文章推荐
ajax的hide隐藏问题解决方法
Dec 11 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
js实现圆形菜单选择器
Dec 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
解析PHP缓存函数的使用说明
2013/05/10 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python如何实现代码检查
2019/06/28 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
Python文件操作的面试题
2013/06/22 面试题
产品促销活动策划书
2014/01/15 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
安全主题班会教案
2015/08/12 职场文书
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL