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+Flash实现访问剪切板操作
Nov 20 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
js文字横向滚动特效
Nov 11 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
详解Angular如何正确的操作DOM
Jul 06 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将会员数据导入到ucenter的代码
2010/07/18 PHP
PHP取进制余数函数代码
2012/01/19 PHP
深入解析php之apc
2013/05/15 PHP
php中opendir函数用法实例
2014/11/15 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
js一组验证函数
2008/12/20 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
python递归查询菜单并转换成json实例
2017/03/27 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
超市国庆节促销方案
2014/02/20 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
美术专业自荐信
2014/07/07 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
运动会稿件100字
2014/09/24 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
成都人事代理协议书
2014/10/25 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL