前端前端vue+elementUI如何实现记住密码功能如何实现记住密码功能
主要给大家介绍了关于vue+elementUI如何实现记住密码功能的相关资料,文中通过示例代码介绍的非常详细,
对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
我们这回使用纯前端保存密码
既然是记住密码,前端也就是使用cookie保存,访问时用cookie读取
先来了解下cookie的基本使用吧
Cookie
所有的cookie信息都在document.cookie中存放着,是一个字符串,里面的cookie以分号和空格分隔。就像这样:
"key1=value1; key2=value2; key3=value3"
// 使用document.cookie 来获取所有cookie
docuemnt.cookie = "id="+value
操作cookie
/**
* 设置cookie值
*
* @param {String} name cookie名称
* @param {String} value cookie值
* @param {Number} expiredays 过期时间,天数
*/
function setCookie (name, value, expiredays) {
let exdate = new Date()
//setDate获取N天后的日期
exdate.setDate(exdate.getDate() + expiredays) //getDate() 获取当前月份的日 + 过期天数
document.cookie =name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString()
}
/**
* 获取cookie值
* @param {String} name cookie名称
*/
function getCookie (name) {
var arr = document.cookie.split(";") //转换数组
//["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
for(var i=0;i<arr.length;i++){
var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
if(arr2[0].trim() == name){
return arr2[1]
}
}
}
/**
* 删除指定cookie值
* @param {String} name cookie名称
*/
function clearCookie (name) {
setCookie(name, '', -1)
}
/**
* 浏览器是否支持本地cookie
*/
function isSupportLocalCookie () {
let {name, value} = {name: 'name', value: 'mingze'}
setCookie(name, value, 1) //设置cookie
return getCookie(name).includes(value) //includes 判断数组name中是否含有当前value(返回true or false)
}
好了了解了cookie我们开始如何实现一个简单的记住密码功能
HTML代码
<el-form :model="ruleForm" :rules="rules"
status-icon
ref="ruleForm"
label-position="left"
label-width="0px"
class="demo-ruleForm login-page">
<h3 class="title">系统登录</h3>
<el-form-item prop="username">
<el-input type="text"
评论0