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教程:window.location使用方法的区别介绍
Oct 04 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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
图解上海144收音机
2021/03/02 无线电
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
简单的js分页脚本
2009/05/21 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
python uuid模块使用实例
2015/04/08 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
Python自动生产表情包
2017/03/17 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
python 项目目录结构设置
2020/02/14 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
团日活动总结
2014/04/28 职场文书
承诺书范文
2014/06/03 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
索赔员岗位职责
2015/02/15 职场文书