用localStorage实现登录时记住密码的功能

HTNL代码片段

 <el-input  v-model="ruleForm.user" placeholder="请输入账号" @input='inputPassword' autocomplete="off"></el-input><el-input type="password" v-model="ruleForm.password" @input='clearFunc' show-password  placeholder="请输入密码" prefix-icon="el-icon-lock" autocomplete="off"></el-input><el-checkbox v-model="checked">记住密码</el-checkbox>
<el-button type="primary" @click="submitForm" :loading="isLoading">登录</el-button>

js代码

export default {name: "login",data() {return {ruleForm: {user: '',password: '',},isLoading:false,loginSwicth:true,checked:false,allUser:[]};},methods: {submitForm() {     //点击登录if(this.ruleForm.user && this.ruleForm.password){this.isLoading = true;let params = {account:this.ruleForm.user,password:this.ruleForm.password}//后端请求时......if (this.checked) {                   var userInfo = {userName:this.ruleForm.user,password:this.ruleForm.password}this.allUser.push(userInfo);var userStr = JSON.stringify(this.allUser);localStorage.setItem("user" , userStr);}else{this.deletData()} }else{this.$message({message: "请输入账号和密码！",type: "warning",duration: 1500});}},inputPassword(){   //输入账号for (let i of this.allUser) {if(this.ruleForm.user == i.userName){this.ruleForm.password = i.password;this.$nextTick(() => {this.checked = true;})}else{this.checked = false;}}},clearFunc(){       //输入密码if( this.ruleForm.user == '' || this.ruleForm.password == ''){this.checked = false;}      },saveData(){      // localStorage保存数据if(localStorage.getItem("user")){var objUser = JSON.parse(localStorage.getItem("user"));for (let i of objUser) {this.allUser.push(i)}this.allUser = this.unique(objUser)var userStr = JSON.stringify(this.allUser);localStorage.setItem("user" , userStr);}}, deletData(){     //删除数据for (let i of this.allUser) {if(this.ruleForm.user == i.userName && this.checked == false){this.allUser.pop(i)var userStr = JSON.stringify(this.allUser);localStorage.setItem("user" , userStr);}}},unique(arr) {   //去重var unique = {};var newArr = [];arr.forEach(function(gpa) {unique[JSON.stringify(gpa)] = gpa});newArr = Object.keys(unique).map(function(u) {return JSON.parse(u)});return newArr},}
};

用localStorage实现登录时记住密码的功能相关推荐

Vue中使用js-cookie插件实现登录时记住密码后存取到Cookie中
场景使用vue实现一个登录页面时,实现记住密码功能. 在勾选了记住密码后将密码存储到Cookie中,然后下次直接从Cookie中取. 注: 博客: https://blog.csdn.net/bad ...
仿QQ登录、记住密码等功能实现
功能:实现账登录.检查账号密码.记住密码.清除记录功能. 设备:电脑一台.Android Studio软件一个. 技术:xml布局.SharedPreferences的使用. 开始: 1.看效果: 2 ...
python配置文件密码管理_python – 可以在django管理员中实现“下次登录时更改密码”类型功能吗？...
我其实正在这样做的过程中.您需要三个组件:用户配置文件(如果您的站点上尚未使用),中间件组件和pre_save信号. 我的代码是在一个名为"帐户"的应用程序. # myprojec ...
Android studio自动登录和记住密码的实现
Android studio自动登录和记住密码的实现文章目录 Android studio自动登录和记住密码的实现前言一.效果二.设计思路三.知识点介绍 1. SharedPreferenc ...
C#-WinForm登录窗体实现记住密码的功能（仿QQ实现）
背景 Winform实现登录窗体中记住密码的功能,模仿QQ登录记住密码的实现如下图所示,其中标题部分因为项目保密的原因,我加了马赛克,请大家见谅. 用户名输入框我们采用下拉列表框ComboBox 密 ...
PHP会员登录实现记住密码功能 thinkPHP5
会员登录实现记住密码功能需要用到cookie 和session,首先我们来简单了解一下cookie 和session 的区别 Cookie Cookie是完全保存在客户端.当客户端禁止cookie时将 ...
Exchange2010SP1配置OWA下次登录时更改密码提醒
在Exchange2010安全管理下,一般首次创建的用户账号的密码均为统一的,为防止其他用户登录自己的账户会在创建账户的同时勾选"用户下次登录时需更改密码"选项.但在Exchang ...
对于AES和RSA算法的结合使用以及MD5加盐注册登录时的密码加密
RSA和AES结合使用接上篇的RSA和AES算法加密之后,AES对称算法对数据量大的加密比较快,而RSA公私钥加密的话会影响加密效率,但是AES的加密与解密的密钥是一致的,导致密钥不能外泄,密钥在网 ...
vue 登录页面记住密码功能
vue+iview/element 一般用来快速搭建后台管理系统,登录页的记住密码功能也是必不可少的. 记住密码快速登录功能(iview ui): 思路:首次登录,记住密码,将密码存储到cookie中 ...

用localStorage实现登录时记住密码的功能

用localStorage实现登录时记住密码的功能

HTNL代码片段

js代码

用localStorage实现登录时记住密码的功能相关推荐

最新文章

热门文章