Home > Article > Web Front-end > How to implement the remember password function in h5

How to implement the remember password function in h5

php中世界最好的语言Original: 2018-01-19 09:44:326081browse

This time I will show you how to implement the password remembering function in h5. What are the precautions for h5 to implement the remembering password function. The following is a practical case, let’s take a look.

HTML5 provides two new methods of storing data on the client side:

localStorage - data storage without time limit

sessionStorage - data for a session Before storing

, these are all done by cookies. But cookies are not suitable for storing large amounts of data because they are passed with each request to the server, which makes cookies slow and inefficient.

In HTML5, data is not passed by every server request, but data is only used when requested. It makes it possible to store large amounts of data without affecting website performance.

For different websites, data is stored in different areas, and a website can only access its own data.

HTML5 uses JavaScript to store and access data.

The data stored by the localStorage method has no time limit. The data is still available after the next day, week or year.

<!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>

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to implement the remember password function in h5

Related articles