Maison > Article > interface Web > Utilisez localStorage pour implémenter la fonction de mémorisation des mots de passe

Utilisez localStorage pour implémenter la fonction de mémorisation des mots de passe

php中世界最好的语言original: 2018-03-27 10:51:071861parcourir

Cette fois, je vais vous présenter la fonction d'utilisation de localStorage pour mémoriser les mots de passe. Quelles sont les précautions pour utiliser localStorage pour réaliser la fonction de mémorisation des mots de passe. Voici des cas pratiques, jetons un coup d'œil.

HTML5 propose deux nouvelles façons de stocker des données côté client :

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

Avant, tout cela était effectué par des 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('keyName');
        var strPass = localStorage.getItem('keyPass');
        if(strName){
            $('#user').val(strName);
        }if(strPass){
            $('#pass').val(strPass);
        }
    });
    function loginBtn_click(){
            var strName = $('#user').val();
            var strPass = $('#pass').val();
            localStorage.setItem('keyName',strName);
            if($('#remember').is(':checked')){
                localStorage.setItem('keyPass',strPass);
            }else{
                localStorage.removeItem('keyPass');
            }
        }
</script>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Comment faire fonctionner la base de données WebSQL dans H5

H5 Canvas crée une barre de progression circulaire et affiche des chiffres Pourcentage

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 H5 exploite le stockage local et la base de données localeArticle suivant：Comment H5 exploite le stockage local et la base de données locale

Articles Liés

Voir plus