JavaScript登录记住密码操作(超简单代码)

 更新时间:2017年03月22日 15:51:33   作者:lihefei_coder  
本文给大家分享一段简单的js代码实现用户登录记住密码操作,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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登录记住密码操作(超简单代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • typescript中声明合并介绍

    typescript中声明合并介绍

    这篇文章主要介绍了typescript中声明合并介绍,类型合并表明编译器将合并两个分开的并且名称相同的声明,合并之后的声明拥有两个声明的特点,任意数量的声明可以被合并,不仅限两个,更多相关内容需要的朋友可以参考下面文章内容
    2022-09-09
  • 微信小程序实现事件传参与数据同步流程详解

    微信小程序实现事件传参与数据同步流程详解

    这篇文章主要介绍了微信小程序开发中实现事件传参与数据同步的详细流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-10-10
  • JavaScript类的写法

    JavaScript类的写法

    这篇文章主要为大家详细介绍了JavaScript类的写法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • bootstrap的3级菜单样式,支持母版页保留打开状态实现方法

    bootstrap的3级菜单样式,支持母版页保留打开状态实现方法

    下面小编就为大家带来一篇bootstrap的3级菜单样式,支持母版页保留打开状态实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js中如何对url进行编码和解码

    js中如何对url进行编码和解码

    这篇文章主要介绍了js中如何对url进行编码和解码问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • JS实现简单控制视频播放倍速的实例代码

    JS实现简单控制视频播放倍速的实例代码

    这篇文章主要介绍了通过JS来实现简单控制视频播放倍速,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • ES6解构赋值实例详解

    ES6解构赋值实例详解

    这篇文章主要介绍了ES6解构赋值,结合实例形式较为详细的分析了ES6结构赋值的基本概念、原理与使用方法,需要的朋友可以参考下
    2017-10-10
  • JS提交form表单实例分析

    JS提交form表单实例分析

    这篇文章主要介绍了JS提交form表单的方法,结合实例形式简单分析了页面加载时提交表单及通过链接提交表单的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • JS给元素注册事件的代码

    JS给元素注册事件的代码

    麦鸡的TAB切换功能代码
    2008-10-10
  • Nodejs使用mysql模块之获得更新和删除影响的行数的方法

    Nodejs使用mysql模块之获得更新和删除影响的行数的方法

    业余时间玩nodejs的时候遇到的情况, 在使用mysql模块连接mysql操作, 想在update, delete语句的时候, 想知道到底update, delete成功了没有
    2014-03-03

最新评论