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 相关文章推荐
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 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生成静态页的实现方法
2013/05/10 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
python实现Decorator模式实例代码
2018/02/09 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
pygame实现弹球游戏
2020/04/14 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
毕业生造价工程师求职信
2013/10/17 职场文书
干部考核评语
2014/04/29 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
大学生操行评语大全
2014/12/31 职场文书
红色经典电影观后感
2015/06/18 职场文书