vue2.0项目记住密码和用户名实例

Posted 2021-01-24 whowhere

的今天突来兴致，试了一下将用户名和密码存在cookie和localStorage里如何实现；从代码难易程度来讲，果断选择了将用户名和密码存在localStorage里面。当然菜鸟上这么说的，楼下。

也许我不是一个好的程序员，不说废话了，直接上代码了：

<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm loginFrom">
<h1 style="font-size: 1.5rem;color: #fff;font-weight: bold;padding: 1rem 0;">登陆</h1>
<el-form-item >
<el-input placeholder="账号" v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
</el-form-item>
<div style="padding: 1rem 0 2rem 0;" class="clear">
<span class="lf" style="color:#0489cc;">帮助</span>
<div class="rt">
<el-checkbox v-model="checked" style="color:#a0a0a0;">一周内自动登录</el-checkbox>
<span @click="clear" style="cursor: pointer;color: #f19149;font-size: 0.75rem;margin-left: 5px;">忘记密码？</span>
</div>
</div>
<el-button type="primary" @click="submitForm(‘ruleForm‘)" style="width: 100%;">登陆</el-button>
</el-form>
</template>
// 当刷新页面时候获取一下localStorage里存的值
mounted() {
this.getlocalStorage()
},
methods: {
// 当记住密码的checbox选中时，像localStorage里存入一下用户输入的用户名和密码
submitForm(formName) {
const self = this
if (self.checked == true) {
self.setlocalStorage(self.ruleForm.username, self.ruleForm.password)
} else {
self.clearlocalStorage()
}
//与后端请求代码，暂时还没有请求地址，先省略了
console.log(‘登陆成功‘)
},
//像localStorage里存入从页面获取的用户名和密码；
setlocalStorage(c_name, c_pwd) {
localStorage.siteName = c_name
localStorage.sitePassword = c_pwd
},
getlocalStorage: function() {
this.ruleForm.username = localStorage.getItem(localStorage.key(1)) //保存到保存数据的地方
this.ruleForm.password = localStorage.getItem(localStorage.key(2))
},
// 点击忘记密码，清空localStorage里的存储
clear: function() {
this.setlocalStorage(‘‘, ‘‘)
}
}
}