html login form

html login with javascript and localstorage

html login with javascript and localstorage this program shows how create html login form using
java script and local storage. This program use to create hybrid app login page using cordova/phonegap

creating hybrid app login page using cordova, use ionic for css.
local storage save users data in browser when users exit app it will check users details in local
storage if users data is true it will redirect users to homepage it will not ask users to login again

you can also see simple login form

HTML login form

<center><b>LogIn</b></center>
<div class="list">
   <input type="hidden" id="id" value=""/>
      <div class="item">
      <input type="email" id="email" placeholder="Email"/>
	  </div>
	  <div class="item">
      <input type="password" id="password" placeholder="password"/> 
      </div>	  
      <input type="button" id="login" class="button button-block button-positive" value="login"/>
  </div>

This is simple login form using ionic css you can also use jquery mobile css

Java script code for check login true or false

<script type="javascript">
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
if(localStorage.login=="true" && filename == 'login.html'){
window.location.href = "home.html";
}
else if(localStorage.login=="false" && filename != 'index.html'){
window.location.href="login.html";
}
</script>

This program check for users details using true or false,
if users login will true it will redirect user to homepage without asking login again.

Localstorage program to store data

for understanding how localstorage works see html local storage program

<script type="javascript">
     $(document).ready(function()
    {
    $("#login").click(function() {
var email=$("#email").val();
var password=$("#password").val();
var dataString="email="+email+"&password="+password+"&login=";
if($.trim(email).length>0 & $.trim(password).length>0)
{
                $.ajax({
                    type: "POST",
                    url:"http://localhost/localstorage/login.php",
                    data: dataString,
                    crossDomain: true,
                    cache: false,
                    beforeSend: function(){ $("#login").val('Logging...');},
                    success: function(data){
                        if(data=="ok")
                        {
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    window.localStorage.setItem("email", email);
    window.localStorage.setItem("login", true);
    window.localStorage.setItem("pass", password);
    window.location.href="home.html";
                        }
                        else if(data=="error")
                        {
                            alert("error");
                             $("#login").val('Login');
                        }
                        
                    }
                });
            }return false;
        });
    });
    </script>

This will post users data to login.php to check users data is valid or not
change http://localhost/localstorage/login.php with your server and folder name

READ  html simple login form

How this page look

copy this code and save login.html

<html>
<head>
<title>localstorage</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/ionic.css">
<script src="jquery/jquery.js"></script>
<script type="javascript">
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
if(localStorage.login=="true" && filename == 'login.html'){
window.location.href = "home.html";
}
else if(localStorage.login=="false" && filename != 'index.html'){
window.location.href="login.html";
}
</script>
<script src="cordova.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>

    <script type="javascript">
     $(document).ready(function()
    {
    $("#login").click(function() {
var email=$("#email").val();
var password=$("#password").val();
var dataString="email="+email+"&password="+password+"&login=";
if($.trim(email).length>0 & $.trim(password).length>0)
{
                $.ajax({
                    type: "POST",
                    url:"http://localhost/localstorage/login.php",
                    data: dataString,
                    crossDomain: true,
                    cache: false,
                    beforeSend: function(){ $("#login").val('Logging...');},
                    success: function(data){
                        if(data=="ok")
                        {
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    window.localStorage.setItem("email", email);
    window.localStorage.setItem("login", true);
    window.localStorage.setItem("pass", password);
    window.location.href="home.html";
                        }
                        else if(data=="error")
                        {
                            alert("error");
                             $("#login").val('Login');
                        }
                        
                    }
                });
            }return false;
        });
    });
    </script>
    
</head>
  <body>
<div class="bar bar-header bar-balanced" style="margin-bottom:80px;">
<center><b>LogIn</b></center>
<div class="list">
   <input type="hidden" id="id" value=""/>
      <div class="item">
      <input type="email" id="email" placeholder="Email"/>
	  </div>
	  <div class="item">
      <input type="password" id="password" placeholder="password"/> 
      </div>	  
      <input type="button" id="login" class="button button-block button-positive" value="login"/>
  </div>
  </body>
  </html>

Use for correct viewport
for fit to all screens.

output:
html login with javascript and localstorage

Soon we update php program to validate data and home page

for login from using php see here
have any doubt comment here.

Leave A Comment

Your email address will not be published. Required fields are marked *