Utilisez localStorage en HTML5 pour implémenter la fonction de mémorisation du mot de passe-Tutoriel H5-php.cn

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

巴扎黑

Libérer： 2017-09-09 11:51:17

original

2834 Les gens l'ont consulté

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>

Copier après la connexion

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!