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 相关文章推荐
PHP守护进程实例
Mar 06 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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
风格模板初级不完全修改教程
2006/10/09 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
preg_match_all使用心得分享
2014/01/31 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
python logging模块的使用总结
2019/07/09 Python
Python如何调用JS文件中的函数
2019/08/16 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
毕业生就业推荐信范文
2013/12/01 职场文书
手机业务员岗位职责
2013/12/13 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
校车安全管理责任书
2015/05/11 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
浅谈react useEffect闭包的坑
2021/06/08 Javascript
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
Python字符串常规操作小结
2022/04/03 Python