Comment utiliser le code JS pour mémoriser le compte et le mot de passe

Cette fois, je vais vous montrer comment mémoriser le compte et le mot de passe avec le code JS. Quelles sont les précautions pour mémoriser le compte et le mot de passe avec le code JS. Voici un cas pratique, jetons un coup d'œil.

De nombreuses fonctions de connexion ont une fonction « Mémoriser le mot de passe », qui n'est en fait rien de plus que la lecture du cookie.

Référence Ajouter un cookie

setCookie (nom, valeur, jours d'expédition)

Obtenir un cookie

getCookie (nom)

Supprimer le cookie

delCookie (nom)

Description du code

formulaire

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

Fonction de vérification de soumission

Lorsque le bouton d'envoi est enfoncé est cliqué, cette fonction sera appelée

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

Fonction d'initialisation du document

Une fois le document chargé, cette fonction sera exécutée

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

Entrez le nom d'utilisateur et le mot de passe, et la case ne sera pas cochée Soumettez la case

et revenez à la page du formulaire

Tapez le nom d'utilisateur et le mot de passe, décochez la case

pour soumettre le formulaire, retournez sur

puis supprimez-le à ce moment Cochez la case et soumettez

A ce moment, le navigateur n'enregistrera plus le cookie

Je vous crois J'ai maîtrisé la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention à php Site Web chinois Autres articles connexes !

Lecture connexe :

Comment utiliser l'encodage base64 pour les images HTML au lieu de

Comment implémenter des polices et des images à défilement en utilisant des éléments de chapiteau L'effet de

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!