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 相关文章推荐
javascript new 需不需要继续使用
Jul 02 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
原生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 常用类整理
2009/12/23 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
vue二级路由设置方法
2018/02/09 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python入门篇之条件、循环
2014/10/17 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
建筑公司文秘岗位职责
2013/11/29 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python