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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
浅谈Vue的computed计算属性
Mar 21 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操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP实现微信对账单处理
2018/10/01 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
python数据结构之图的实现方法
2015/07/08 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
入党自我鉴定
2014/03/25 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
辞职信范文大全
2015/03/02 职场文书
警示教育片观后感
2015/06/17 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python