JavaScript登录记住密码操作(超简单代码)


Posted in Javascript onMarch 22, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>记住密码</title>
</head>
<body>
<form id="loginForm">
  <input id="user" type="text" placeholder="用户名"><br>
  <input id="pswd" type="password" placeholder="密码"><br>
  <label><input id="remember" type="checkbox">记住密码</label><br>
  <input type='submit' value="登录">
</form>
<script>
  window.onload = function(){
    var oForm = document.getElementById('loginForm');
    var oUser = document.getElementById('user');
    var oPswd = document.getElementById('pswd');
    var oRemember = document.getElementById('remember');
    //页面初始化时,如果帐号密码cookie存在则填充
    if(getCookie('user') && getCookie('pswd')){
      oUser.value = getCookie('user');
      oPswd.value = getCookie('pswd');
      oRemember.checked = true;
    }
    //复选框勾选状态发生改变时,如果未勾选则清除cookie
    oRemember.onchange = function(){
      if(!this.checked){
        delCookie('user');
        delCookie('pswd');
      }
    };
    //表单提交事件触发时,如果复选框是勾选状态则保存cookie
    oForm.onsubmit = function(){
      if(remember.checked){ 
        setCookie('user',oUser.value,7); //保存帐号到cookie,有效期7天
        setCookie('pswd',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);
  };
</script>
</body>
</html>

以上所述是小编给大家介绍的JavaScript登录记住密码操作(超简单代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
原生JS京东轮播图代码
Mar 22 #Javascript
10道典型的JavaScript面试题
Mar 22 #Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
js弹出窗口简单实现代码
Mar 22 #Javascript
js实现自动图片轮播代码
Mar 22 #Javascript
JavaScript中清空数组的三种方式
Mar 22 #Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 #Javascript
You might like
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
Python递归遍历列表及输出的实现方法
2015/05/19 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
python删除文本中行数标签的方法
2018/05/31 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python计算无向图节点度的实例代码
2019/11/22 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
家长对老师的评语
2014/04/18 职场文书
应聘教师求职信
2014/07/19 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
孔繁森观后感
2015/06/10 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL