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的构造函数和constructor属性
Jan 09 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
JS模拟实现京东快递单号查询
Nov 30 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
自己动手做一个SQL解释器
2006/10/09 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python切片索引用法示例
2018/05/15 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Python time库基本使用方法分析
2019/12/13 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
如何掌握自荐信格式呢
2013/11/19 职场文书
化妆品促销方案
2014/02/24 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
护理专科学生自荐书
2014/07/05 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB