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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
使用js实现单链解决前端队列问题的方法
Feb 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中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
javascript动画浅析
2012/08/30 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
python中的随机函数小结
2018/01/27 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
python实现网页录音效果
2020/10/26 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
小区门卫工作职责
2013/12/14 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
远程研修随笔感言
2014/02/10 职场文书
汉语言文学职业规划
2014/02/14 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
教师暑期培训感言
2014/08/15 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
青年文明号汇报材料
2014/12/23 职场文书
2015年药店工作总结
2015/04/20 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server