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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
JS实现页面打印功能
Mar 16 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 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 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP图片加水印实现方法
2016/05/06 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
python编写分类决策树的代码
2017/12/21 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
Python魔法方法功能与用法简介
2019/04/04 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
县优秀教师事迹材料
2014/01/31 职场文书
利群广告词
2014/03/20 职场文书
教师节横幅标语
2014/10/08 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers