Maison >interface Web >Tutoriel H5 >Utilisez localStorage en HTML5 pour implémenter la fonction de mémorisation du mot de passe

Utilisez localStorage en HTML5 pour implémenter la fonction de mémorisation du mot de passe

巴扎黑original: 2017-09-09 11:51:172880parcourir

Cet article présente principalement l'implémentation de la fonction localStorage super simple de HTML5 pour mémoriser les mots de passe. Elle est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer

HTML5 propose deux façons de stocker des données sur le client. Nouvelle méthode :

localStorage - stockage de données sans limite de temps
sessionStorage - stockage de données pour une session

Avant, tout cela se faisait grâce aux cookies. Mais les cookies ne conviennent pas au stockage de grandes quantités de données car ils sont transmis à chaque requête au serveur, ce qui les rend lents et inefficaces.

En HTML5, les données ne sont pas transmises à chaque requête du serveur, mais ne sont utilisées que sur demande. Il permet de stocker de grandes quantités de données sans affecter les performances du site Web.

Pour différents sites Web, les données sont stockées dans différentes zones et un site Web ne peut accéder qu'à ses propres données.

HTML5 utilise JavaScript pour stocker et accéder aux données.

Les données stockées par la méthode localStorage n'ont pas de limite de durée. Les données sont toujours disponibles après le jour, la semaine ou l'année suivante.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<style type="text/css">
    form{
        width: 300px;
        padding: 10px 0px 20px 30px;
        height:auto;
        border-radius: 6px;
        border-left:8px solid #19a049;
        background:#eee;
        margin:100px auto;
    }
    #user,#pass{
        padding: 8px;
        outline: none;
        background: transparent;
        border:1px solid #999;
        margin-top: 5px;
    }
    #sub{
        padding: 6px;
        outline: none;
        border:none;
        background: #19a049;
        color:#fff;
        width: 150px;
        border-radius: 6px;
        cursor: pointer;
    }
</style>
<body>
    <form action="" method="" onsubmit="return loginBtn_click();">
        <h3>Log in</h3>
        <input type="text" name="user" placeholder="user" id="user">
        <input type="password" name="pass" placeholder="password" id="pass">
        <input type="checkbox" id="remember" checked><br/><br/>
        <input type="submit" id="sub">
    </form>
</body>
<script type="text/javascript">
    $(document).ready(function(){

        var strName = localStorage.getItem(&#39;keyName&#39;);
        var strPass = localStorage.getItem(&#39;keyPass&#39;);
        if(strName){
            $(&#39;#user&#39;).val(strName);
        }if(strPass){
            $(&#39;#pass&#39;).val(strPass);
        }

    });

    function loginBtn_click(){
            var strName = $(&#39;#user&#39;).val();
            var strPass = $(&#39;#pass&#39;).val();
            localStorage.setItem(&#39;keyName&#39;,strName);
            if($(&#39;#remember&#39;).is(&#39;:checked&#39;)){
                localStorage.setItem(&#39;keyPass&#39;,strPass);
            }else{
                localStorage.removeItem(&#39;keyPass&#39;);
            }
        }
</script>
</html>

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!

Déclaration：

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

Article précédent：Comment gérer les sauts de ligne provoqués par les attributs float en HTML5Article suivant：Comment gérer les sauts de ligne provoqués par les attributs float en HTML5

Articles Liés

Voir plus