Home > Article > Web Front-end > Use localStorage to implement the function of remembering passwords

Use localStorage to implement the function of remembering passwords

php中世界最好的语言Original: 2018-03-27 10:51:071801browse

This time I will bring you the function of using localStorage to remember passwords. What are the things to note? Here are practical cases, let’s take a look.

HTML5 provides two new ways to store data on the client side:

localStorage - data storage without time limits
sessionStorage - Data storage for a session

Before, these were 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('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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Use localStorage to implement the function of remembering passwords

Related articles