我们这回使用纯前端保存密码
既然是记住密码,前端也就是使用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> </el-form-item> <el-form-item prop="password"> <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码" ></el-input> </el-form-item> <el-checkbox v-model="checked" style="color:#a0a0a0;margin:0 0 20px 0">记住密码</el-checkbox> <el-form-item style="width:100%;"> <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录 </el-button> </el-form-item> </el-form>
vue代码
data(){ return { logining: false, checked: true ruleForm: { username: '', password: '', }, rules: { username: [{required: true, message: '请输入您的帐户', trigger: 'blur'}], password: [{required: true, message: '请输入您的密码', trigger: 'blur'}] }, } }, mounted() { this.account() //获取cookie的方法 }, account(){ if(document.cookie.length <= 0){ console.log(this.getCookie('mobile')) this.ruleForm.username = this.getCookie('mobile') this.ruleForm.password = this.getCookie('password') } }, setCookie(c_name,c_pwd,exdate){ //账号,密码 ,过期的天数 var exdate = new Date() console.log(c_name,c_pwd) exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) //保存的天数 document.cookie ="mobile="+c_name+";path=/;expires="+exdate.toLocaleString() document.cookie ="password="+c_pwd+";path=/;expires="+exdate.toLocaleString() }, 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] } } }, clearCookie(){ this.setCookie("","",-1) //清除cookie }, handleSubmit(){ //提交登录 this.$refs.ruleForm.validate((valid) => { if(valid){ this.logining = true; var _this = this; if(_this.checked == true){ //存入cookie _this.setCookie(_this.ruleForm.username,_this.ruleForm.password,7) //保存7天 }else{ _this.clearCookie(); } Login({ mobile:_this.ruleForm.username, password:_this.ruleForm.password }).then((result) => { console.log(result) _this.$alert('登陆成功') }) } }
好了,这回的记住密码就到这里,小伙伴们一起努力吧 ^ 0 ^
总结
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 群星.2024-凡人歌电视剧原声带【正午阳光】【FLAC分轨】
- 黑神话悟空上品骨悚然精魄获取方法一览|上品骨悚然精魄收集攻略
- 《演灭Evotinction》正式登陆多平台发售!带你进入科幻潜行新境界
- 命运圣契2024公测最新兑换码大全 命运圣契开服可用兑换码汇总
- 银霞.1979-《回答·兰花草》新加坡限量复黑版[WAV+CUE]
- 王菲.1996-《乐乐精逊SACD日本限量版[WAV+CUE]
- 王菲.1996-《乐乐精逊SACD日本限量版[WAV+CUE]
- 不止黑神话!杭州给原创企业真金白银扶持 打造“杭州游戏”品牌
- 很有多样性:《战锤》首次引入非二元性别角色
- 《少女前线2:追放》项目组将裁员 官方:进一步优化组织结构
- 陈慧琳.2002-闪亮每一天新歌+精选2CD【正东】【WAV+CUE】
- 袁培华.1992-有缘【歌林】【WAV+CUE】
- 王瑞霞.1996-是我太软心【名冠】【WAV+CUE】
- 《谭维维 30首经典流行歌曲精选辑 2CD》[WAV/分轨][1.1GB]
- 《赵传 出道三十年全新大碟 你过得还好吗》[WAV/分轨][460MB]