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 相关文章推荐
简易js代码实现计算器操作
Apr 15 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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反射类ReflectionClass用法分析
2016/05/12 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
python爬虫常用的模块分析
2014/08/29 Python
python实现查询苹果手机维修进度
2015/03/16 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python程序中设置HTTP代理
2016/11/06 Python
zookeeper python接口实例详解
2018/01/18 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
《蚕姑娘》教学反思
2014/04/15 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
执行力心得体会范文
2016/01/11 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript