how to create login page in javascript using local storage

in this artical we will create a login system using javascript and save there data in localstorage

user can sing up for login if user do not have login key or value user can not go to our page.

so lest get started..

before we start bulding this project first of all we want to under stand the flow of the code.

first of all we create a sing-up page thare user can send their data to localstorage if it is blank we will return " " othervice we will redirect them in to login page if their data match's with the arry's objects then we will redirec them to the admin page.

Time for the Implementation

first of all we will create a file which name is sing-up.html and we will create a simple form like down below :

<!DOCTYPE html>

<head>

</head>

<style>

form{

box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}

</style>

<body >

<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your username</label>

</div>

<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>

</div>

<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>

</div>

<button type="submit" onclick="addUser()" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>

</div>

</body>

</html>

in this tutorial we are using tailwind css and flowbite as a framework it is very easy to use just include this cdn link in your html head tag

...

...

in this code we have given the id for each element we will use it to target the element.

now its is time to write some javascript write this script code for add the user data in localStorage :

...

// get arry from localStorage

let userList = JSON.parse(localStorage.getItem("userList"))||[];

// add user data

function addUser(){

let name = document.getElementById("name").value;

let email = document.getElementById("email").value;

let pass = document.getElementById("password").value;

// if input value=" "

if(name=="" || email=="" || pass==""){

return

}

//store the value's in a object

let userData = {

name,

email,

pass

}

// console.log(userData);

//push the value's in array

userList.push(userData);

// set the array to localStorage

localStorage.setItem("userList",JSON.stringify(userList));

alert("User added successfully");

//redirect to login page

window.location.href="file:///C:/login-System/login.html"

}

</script>

...

in this script we have get the userList using localStorage.getItem("userList") and we parsed the data.

after that we have created a function which name is addUser() first of all it is targeting the form input's and geting their value's after this we will check the condition if name,password or email fild was empty then we will return " " .

after that we have created a object which stores the value of name,email and password after doing this we will push this data into array and set this array in localStorage

so thats it now user have successfully added thier data in localStorage.

now we will create a login page and validate their data.

create a simple login page like this :

<!DOCTYPE html>

<head>

<title>login</title>

</head>

<style>

form{

box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}

</style>

<body >

<h1 class="text-center text-2xl p-5">Login</h1>

<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>

</div>

<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>

</div>

<button type="submit" onclick="validation()" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>

</div>

</body>

</html>

after that write this script :

...

//target arrays available in localStorage

let userList = JSON.parse(localStorage.getItem("userList"))||[];

let user = JSON.parse(localStorage.getItem("user"))||[];

//validate the user

function validation(){

let email = document.getElementById("email").value;

let password = document.getElementById("password").value;

// if input value is blank

if(email=="" || password==""){

return

}

//compare all objects with input value

userList.map((val,ind)=>{

if(val.email==email && val.pass==password){

user = []

localStorage.setItem("user",JSON.stringify(user));

userList.splice(ind,1);

userList.unshift(val);

localStorage.setItem("userList",JSON.stringify(userList));

user.push(val);

localStorage.setItem("user",JSON.stringify(user));

//redirect to admin page

window.location.href="file:///C:/login-System/index.html";

}

})}

</script>

...

in this script first of all i have targeted input's and got their values after that i have compared there value's in userList for comparison i have used the map mathod and i have compared each object with user input if it is valid then we redirect user into admin page.

now our 90% work is done create a admin page and show user name on web page first of all create a simple html file structure like this :

<!DOCTYPE html>

<head>

<title>Dashbord</title>

</head>

<body>

<h1 id="h1" class="text-5xl p-5">WellCome Back : </h1>

<button type="submit" onclick="logOut()" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Logout</button>

</body>

</html>

and now write this script :

...

//get user array from localStorage

let user = JSON.parse(localStorage.getItem("user"))||[];

//if user don't have loggedin

if(user.length===0){

window.location.href="file:///C:/login-System/login.html"

}

//get the user array first object and set in h1 innerHTML

let res = (user.length-1)

document.getElementById("h1").innerHTML += user[res].name

//function for logOut

function logOut(){

// set a blank array in localStorage

user = []

localStorage.setItem("user",JSON.stringify(user))

//redirect to login page

location.href="login.html"

}

</script>

...

that's it now your login,singUp and logout functionality is ready. you can edit or add more funtionality to this code and make it more effciant

if you have a minut give us your valuable feedback thenks for reading.

how to create login page in javascript using local storage

Time for the Implementation

feedback

Post a Comment

Post a Comment

Contact Form