vue项目实现记住密码到cookie功能示例(附源码)


Posted in Javascript onJanuary 31, 2018

本文介绍了vue项目实现记住密码到cookie功能示例,分享给大家,具体如下:

vue项目实现记住密码到cookie功能示例(附源码)

登陆页面

实现功能:

1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内
2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入

大体思路就是通过存/取/删cookie实现的;每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存到cookie当中,效果图如上:

直接上主要的代码

HTML部分

<div class="ms-login">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
      </el-form-item>
      <!-- `checked` 为 true 或 false -->
      <el-checkbox v-model="checked">记住密码</el-checkbox>
      <br>
      <br>
      <div class="login-btn">
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </div>
    </el-form>
  </div>

JS部分

//页面加载调用获取cookie值
  mounted() {
    this.getCookie();
  },
  methods: {
    submitForm(formName) {
             const self = this;
            //判断复选框是否被勾选 勾选则调用配置cookie方法
            if (self.checked == true) {
              console.log("checked == true");
              //传入账号名,密码,和保存天数3个参数
              self.setCookie(self.ruleForm.username, self.ruleForm.password, 7);
            }else {
             console.log("清空Cookie");
             //清空Cookie
             self.clearCookie();
            }
            
            //与后端请求代码,本功能不需要与后台交互所以省略
            
            console.log("登陆成功");
         
        });
      },
      //设置cookie
      setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date(); //获取时间
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
        //字符串拼接cookie
        window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
        window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      },
      //读取cookie
      getCookie: function() {
        if (document.cookie.length > 0) {
          var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
          for (var i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split('='); //再次切割
            //判断查找相对应的值
            if (arr2[0] == 'userName') {
              this.ruleForm.username = arr2[1]; //保存到保存数据的地方
            } else if (arr2[0] == 'userPwd') {
              this.ruleForm.password = arr2[1];
            }
          }
        }
      },
      //清除cookie
      clearCookie: function() {
        this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了
      }

浏览器中的cookie信息如下图,注意这里的cookie的expire/Max-Age过期时间,这个时间是格林尼治标准时间GMT,世界统一的时间,GMT+8小时就是北京时间。(这里不做加密功能)

vue项目实现记住密码到cookie功能示例(附源码)

源码链接 vue项目实现表单登录页保存账号和密码到cookie功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 #Javascript
微信小程序progress组件使用详解
Jan 31 #Javascript
微信小程序button组件使用详解
Jan 31 #Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 #Javascript
微信小程序模板(template)使用详解
Jan 31 #Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 #Javascript
js保留两位小数方法总结
Jan 31 #Javascript
You might like
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
python的faker库用法
2019/11/28 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
上海世博会志愿者口号
2014/06/17 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
销售目标责任书
2014/07/23 职场文书
就业意向协议书
2015/01/29 职场文书
病人慰问信范文
2015/02/15 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
自考生自我评价
2019/06/21 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python