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 多浏览器 事件大全
Mar 23 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
JS的replace方法介绍
Oct 20 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
vue中组件的过渡动画及实现代码
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多维数组去掉重复值示例分享
2014/03/02 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
python 读取文件并替换字段的实例
2018/07/12 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
pip安装python库的方法总结
2019/08/02 Python
python多线程实现TCP服务端
2019/09/03 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
写好自荐信要注意的问题
2013/11/10 职场文书
让生命充满爱观后感
2015/06/08 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
python图片灰度化处理的几种方法
2021/06/23 Python
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技