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中数组的sort()方法的使用介绍
Dec 18 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 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基础知识回顾
2012/08/16 PHP
php获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
python静态方法实例
2015/01/14 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
python机器学习之贝叶斯分类
2018/03/26 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
队名及霸气口号大全
2015/12/25 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis