前端vue+elementUI如何实现记住密码功能_前端实现记住密码功能资源-CSDN文库

版权申诉

117 浏览量 2021-01-18 17:22:37 上传评论收藏 43KB PDF 举报

资源推荐

资源详情

资源评论

前端前端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"

v-model="ruleForm2.username"

auto-complete="off"

placeholder="用户名"

></el-input>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

版权申诉

weixin_38654944

粉丝: 2
资源: 943

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip