JSコードを使ってアカウントとパスワードを記憶する方法

今回は、JSコードを使用してアカウントとパスワードを記憶する方法と、JSコードを使用してアカウントとパスワードを記憶するための注意事項を紹介します。実際のケースを見てみましょう。

多くのログイン機能には「パスワードを記憶する」機能がありますが、これは実際にはCookieを読み取ることに他なりません。

リファレンス Cookieの追加

setCookie (name, value, expdays)

Get Cookie

getCookie (name)

Cookieの削除

delCookie (name)

コードの説明

フォームフォーム

<!-- 登陆表单 --><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('请输入必填字段!!!')        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 ;
    }
}

ユーザー名とパスワードを入力し、チェックボックスのチェックを外します

送信して、画面に戻りますフォームページ

ユーザー名とパスワードを入力し、チェックボックスのチェックを外してください

フォームを送信し、戻ってください

このとき、チェックボックスのチェック状態を外して送信してください

この時点で、ブラウザはCookieを保存しなくなりました

I信じてください。これらの場合の方法は習得済みです。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

HTML画像の代わりにbase64エンコードを使用する方法

マーキー要素を使用してフォントと画像をスクロールする効果を実現する方法

以上がJSコードを使ってアカウントとパスワードを記憶する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。