집 > 기사 > 웹 프론트엔드 > JS 코드를 사용하여 계정과 비밀번호를 기억하는 방법

JS 코드를 사용하여 계정과 비밀번호를 기억하는 방법

php中世界最好的语言원래의: 2018-03-06 16:06:014120검색

이번에는 JS 코드를 사용하여 계정과 비밀번호를 기억하는 방법과 JS 코드를 사용하여 계정과 비밀번호를 기억하는 주의사항에 대해 알려드리겠습니다.

많은 로그인 기능에는 "비밀번호 기억" 기능이 있는데, 이는 실제로 쿠키를 읽는 것에 지나지 않습니다.

참조 쿠키 추가

setCookie(이름, 값, 만료일)

쿠키 가져오기

getCookie(이름)

쿠키 삭제

delCookie(이름)

코드 설명

양식

<!-- 登陆表单 --><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>

제출 체크 기능

제출 버튼을 클릭하면 이 기능이 호출됩니다

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(&#39;请输入必填字段!!!&#39;)        return false ;
    }   
}

문서 초기화 기능

문서가 로드된 후 이 기능을 실행합니다

//将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 ;
    }
}

사용자 이름과 비밀번호를 입력하고 확인란을 선택 취소하고

제출을 한 후 다음으로 돌아갑니다. 양식 페이지

사용자 이름과 비밀번호를 입력하고 확인란을 선택 취소하세요

양식을 제출하고 돌아가세요

이때 확인란의 확인 상태를 제거하고 제출하세요

이때 브라우저는 더 이상 쿠키를 저장하지 않습니다

나는 당신이 이러한 경우의 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하십시오!