Remember Me Archives - Developer Desks

Remember Me functionality using HTML5 & jquery

Html5 updated lot of new features and functionalities. The most one of the html5 is local storage option. Its like a cookies storage in php session, using cookies we can stored few amount of data in browser but using local storage u can stored lot of data’s in user browser. Its features helps to solve many complex problems and a better way to solve functionality which generally takes much time with older methods. One of the best feature in HTML5 is support for Web Storage. This has helped many of the developers in many different ways, for storing temporary data storage.One of the example is given below. Here is a simple example of “Remember Me” functionality on Login /Sign in form using HTML5 Web storage and jQuery.

So using local storage we are learn Remember Me functionality using HTML5 & jquery

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(function() {

                if (localStorage.chkbx && localStorage.chkbx != '') {
                    $('#remember_me').attr('checked', 'checked');
                    $('#username').val(localStorage.usrname);
                    $('#pass').val(localStorage.pass);
                } else {
                    $('#remember_me').removeAttr('checked');
                    $('#username').val('');
                    $('#pass').val('');
                }

                $('#remember_me').click(function() {

                    if ($('#remember_me').is(':checked')) {
                        // save username and password
                        localStorage.usrname = $('#username').val();
                        localStorage.pass = $('#pass').val();
                        localStorage.chkbx = $('#remember_me').val();
                    } else {
                        localStorage.usrname = '';
                        localStorage.pass = '';
                        localStorage.chkbx = '';
                    }
                });
            });

        </script>
        
        <div class="container">
            <form class="form-signin">
                <h2 class="form-signin-heading">Please sign in</h2>
                <input type="text" class="input-block-level" placeholder="Email address" id='username'>
                <input type="password" class="input-block-level" placeholder="Password" id="pass">
                <label class="checkbox">
                    <input type="checkbox" value="remember-me" id="remember_me"> Remember me
                </label>
                <button class="btn btn-large btn-primary" type="submit">Sign in</button>
            </form>
        </div>

$(function() {

if (localStorage.chkbx && localStorage.chkbx != '') {

$('#remember_me').attr('checked', 'checked');

$('#username').val(localStorage.usrname);

$('#pass').val(localStorage.pass);

} else {

$('#remember_me').removeAttr('checked');

$('#username').val('');

$('#pass').val('');

}

$('#remember_me').click(function() {

if ($('#remember_me').is(':checked')) {

// save username and password

localStorage.usrname = $('#username').val();

localStorage.pass = $('#pass').val();

localStorage.chkbx = $('#remember_me').val();

} else {

localStorage.usrname = '';

localStorage.pass = '';

localStorage.chkbx = '';

}

});

</script>

<h2 class="form-signin-heading">Please sign in</h2>

<input type="checkbox" value="remember-me" id="remember_me"> Remember me

</label>

</form>

</div>

This is the simple functionality for using remember me function in html5

Keep Reading