Maison > interface Web > js tutoriel > Comment utiliser le code JS pour mémoriser le compte et le mot de passe

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

php中世界最好的语言
Libérer: 2018-03-06 16:06:01
original
4154 Les gens l'ont consulté

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>
Copier après la connexion

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

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 ;
    }
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal