zoukankan      html  css  js  c++  java
  • JS前端记住密码

    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>
    View Code
    用户名:
    密   码: 

  • 相关阅读:
    石家庄的联通破网络,请大家鉴定
    快速动态访问属性
    TcpRouter端口转发工具
    谈谈我的开发秘密武器
    搞清如何使用oAuth 1.0 & 1.0a
    回顾我学过的编程语言
    jQuery moible 开发笔记之项目设计
    从Minecraft(我的世界)看游戏设计外行人的游戏杂谈
    某android平板项目开发笔记aChartEngine图表显示(2)
    R语言绘图学习笔记之Scatter plots
  • 原文地址:https://www.cnblogs.com/apeng/p/14265332.html
Copyright © 2011-2022 走看看