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异步提交表单数据的说明及方法实例
Jun 22 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
JS截取字符串实例详解
Nov 24 Javascript
深入理解js generator数据类型
Aug 16 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
PHP 获取文件权限函数介绍
2013/07/11 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
JS实现打字游戏
2019/12/17 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Python正则表达式完全指南
2017/05/25 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
简单了解django缓存方式及配置
2019/07/19 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
社区学习十八大感想
2014/01/22 职场文书
社区庆八一活动方案
2014/02/02 职场文书
党支部承诺书范文
2014/03/28 职场文书
移交协议书
2014/08/19 职场文书
小学重阳节活动总结
2015/03/24 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python