js实现登录时记住密码的方法分析


Posted in Javascript onApril 05, 2020

本文实例讲述了js实现登录时记住密码的方法。分享给大家供大家参考,具体如下:

常见的很多网站登录,都有记住密码功能,下面是用js实现的记住密码功能(代码用的源生js,不用引入任何插件,大家如果引入了jQuery,可以进行修改,优化)

js部分

window.onload = function(){
 var oForm = document.getElementById('myForm');
 var oUser = document.getElementById('username');
 var oPswd = document.getElementById('passwrod');
 var oRemember = document.getElementById('remember');
 //页面初始化时,如果帐号密码cookie存在则填充
 if (getCookie('username') && getCookie('password')) {
 oUser.value = getCookie('username');
 oPswd.value = getCookie('password');
 oRemember.checked = true;
 }
 //复选框勾选状态发生改变时,如果未勾选则清除cookie
 oRemember.onchange = function() {
 if (!this.checked) {
  delCookie('username');
  delCookie('password');
 }
 };
 //表单提交事件触发时,如果复选框是勾选状态则保存cookie
 oForm.onsubmit = function() {
 if (remember.checked) {
  setCookie('username', oUser.value, 7); //保存帐号到cookie,有效期7天
  setCookie('password', oPswd.value, 7); //保存密码到cookie,有效期7天
 }
 };
};
//设置cookie
function setCookie(name, value, day) {
 var date = new Date();
 date.setDate(date.getDate() + day);
 document.cookie = name + '=' + value + ';expires=' + date;
};
//获取cookie
function getCookie(name) {
 var reg = RegExp(name + '=([^;]+)');
 var arr = document.cookie.match(reg);
 if (arr) {
 return arr[1];
 } else {
 return '';
 }
};
//删除cookie
function delCookie(name) {
 setCookie(name, null, -1);
};

登录页面

<form id="myForm" action="login" method="post">
 <input type="text" value="" class="inp" name = "username" id="username" />
 <input type="password" value="" class="inp" name = "password" id="passwrod" />
 
 <input type="text" class="inp" id="yzm" placeholder="验证码" />
 <img id="img" src="getCode" onclick="changeImg()">
 
 <div style="margin: 10px;">
 <span><input type="checkbox" id="remember"><label for="remember">记住我</label></span>
 <span style="float: right;">注册</span>
 </div>
 
 <button type="button" class="inp" id="btn">立即登录</button>
</form>

注意js里边的id对应:

js实现登录时记住密码的方法分析

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
Vue插件之滑动验证码用法详解
Apr 05 #Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 #Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 #jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 #jQuery
vue中使用v-for时为什么不能用index作为key
Apr 04 #Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 #Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 #Javascript
You might like
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
javascript 数组的方法集合
2008/06/05 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Python类属性的延迟计算
2016/10/22 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python continue继续循环用法总结
2018/06/10 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
员工自我鉴定范文
2013/10/06 职场文书
行政专员工作职责
2013/12/22 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
工会经费申请报告
2015/05/15 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis