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的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
html5 录制mp3音频支持采样率和比特率设置
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目录操作实例代码
2014/02/21 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
node.js中watch机制详解
2014/11/17 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
python中正则的使用指南
2016/12/04 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
ET Mall东森购物网:东森严选
2017/03/06 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
介绍一下如何优化MySql
2016/12/20 面试题
金融专业个人求职信
2013/09/22 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技