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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
在网页中屏蔽快捷键
Sep 06 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
杏林同学录(一)
2006/10/09 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
JS功能代码集锦
2016/05/04 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Python松散正则表达式用法分析
2016/04/29 Python
python list元素为tuple时的排序方法
2018/04/18 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
django实现日志按日期分割
2020/05/21 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
九月份红领巾广播稿
2014/01/22 职场文书
学校运动会加油词
2015/07/18 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS