How to use JS code to remember account and password

This time I will show you how to remember account and password with JS code. What are the precautions for remembering account and password with JS code? The following is a practical case, let’s take a look.

Many login functions have a "remember password" function, which is actually nothing more than reading

cookie.

Reference to add Cookie

setCookie (name, value, expdays)

Get Cookie

getCookie (name)

Delete Cookie

delCookie (name)

Code description

form form

<!-- 登陆表单 --><form method="post" autocomplete="off" onsubmit="return check()">
  <!-- 用户名输入 -->
  <input type="text"  name="username" id="username" required="required" >
  <!-- 密码输入,禁用自动填充 -->
  <input type="password" autocomplete="new-password" name="password" id="password" required="required">
  <!-- 是否记住密码复选框 -->
  <input type="checkbox" id="isRmbPwd" name="isRmbPwd" checked="checked">记住密码  <!-- 提交按钮 -->
  <input type="submit" value="提交"></form>

Submit check function

When you click the submit button, it will Call this function

function check (){    //获取表单输入:用户名,密码,是否保存密码
    var username = document.getElementById("username").value.trim() ;    var password = document.getElementById("password").value.trim() ;    var isRmbPwd = document.getElementById("isRmbPwd").checked ;    
    //判断用户名,密码是否为空(全空格也算空)
    if ( username.length != 0 && password.length != 0 )
    {        //若复选框勾选,则添加Cookie,记录密码
        if ( isRmbPwd == true )
        {   
            setCookie ( "This is username", username, 7 ) ;
            setCookie ( username, password, 7 ) ;
        }        //否则清除Cookie
        else
        {
            delCookie ( "This is username" ) ;
            delCookie ( username ) ;
        }        return true ;
    }    //非法输入提示
    else
    {
        alert('请输入必填字段!!!')        return false ;
    }   
}

Document initialization function

After the document is loaded, execute this function

//将function函数赋值给onload对象window.onload = function (){    //从Cookie获取到用户名
    var username = getCookie("This is username") ;    //如果用户名为空,则给表单元素赋空值
    if ( username == "" )
    {        document.getElementById("username").value="" ;        document.getElementById("password").value="" ;        document.getElementById("isRmbPwd").checked=false ;
    }    //获取对应的密码,并把用户名,密码赋值给表单
    else
    {        var password = getCookie(username) ;    
        document.getElementById("username").value = username ;        document.getElementById("password").value = password ;        document.getElementById("isRmbPwd").checked = true ;
    }
}

Enter the user name and password, and uncheck the checkbox

Submit, return to the form page

Enter the username and password, uncheck the checkbox

Submit the form, return

At this time, remove the checkbox check state ,Submit

At this time, the browser will no longer save cookies

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use base64 encoding for html pictures instead

How to implement scrolling fonts and pictures in marquee elements Effect

The above is the detailed content of How to use JS code to remember account and password. For more information, please follow other related articles on the PHP Chinese website!