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 相关文章推荐
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
跟我学习javascript的this关键字
May 28 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
js瀑布流布局的实现
Jun 28 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
Openlayers学习之地图比例尺控件
Sep 28 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
mysql 性能的检查和优化方法
2009/06/21 PHP
学习php笔记 字符串处理
2010/10/19 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
golang与PHP输出excel示例
2016/07/22 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
js实现时间日期校验
2020/05/26 Javascript
使用python实现接口的方法
2017/07/07 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Python语言快速上手学习方法
2018/12/14 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
城市规划毕业生求职信
2013/10/10 职场文书
2014年国培研修感言
2014/03/09 职场文书
人事经理岗位职责
2014/04/28 职场文书
语文教育专业求职信
2014/06/28 职场文书
本科应届生求职信
2014/08/05 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
工作收入证明范本
2015/06/12 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书