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 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
Js 中debug方式
Feb 07 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
关于Javascript作用域链的八点总结
2013/12/06 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
js实现弹窗效果
2020/08/09 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
PyTorch-GPU加速实例
2020/06/23 Python
用python实现学生管理系统
2020/07/24 Python
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
党员思想汇报范文
2013/12/30 职场文书
应聘会计求职信
2014/06/11 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
元旦晚会开场白
2015/05/29 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
预备党员入党感想
2015/08/10 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Python各协议下socket黏包问题原理
2022/04/12 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis