Login and registration using local storage

[powerson65]

Good evening
I am trying to implement a simple login and sign in function that a user can register and then sign in to be able to use the site, i have two pop ups for the sign up and sign in, as follows

<div class="popup">
            <h2>Welcome Guest!</h2>
            <p>Please enter your login and password here</p>
            <div>
                <label for="email">Login </label>
                <input type="text" id="username" value="" />
            </div>
            <div>
                <label for="password">Password</label>
                <input type="password" id="password" value="" />
            </div>
          <input type="button" value="Log In" />


            <a class="close" href="#close"></a>
        </div>


         <div class="popup">
        <h2>Register</h2>
        <p>Please enter your details here</p>
        <div>
            <label for="email">Login (Username)</label>
            <input type="text" id="username" value="" />
        </div>
        <div>
            <label for="pass">Password</label>
            <input type="password" id="password" value="" />
        </div>

        <button onclick="store()" type="button">Sign up </button>   or   <a href="#login_form" id="login_pop">Log In</a>

        <a class="close" href="#close"></a>
    </div>
    </div>

While the functions for the signup and sign in are as follows

//function to store user name and password
function store () {
     var inputUsername= document.getElementById("username");
     var inputPassword= document.getElementById("password");
     localStorage.setItem("username", inputUsername.value);
     localStorage.setItem("password", inputPassword.value);
    });


    //function to sign in
    function login() {
 var inputUsername = localStorage.getItem("username");
 var inputPassword = localStorage.getItem("password");

 if (username != "undefined" || username != "null" || password != "undefined" || password !="null")
 {
    document.getElementByID('welcomeMessage').innerHTML = "Welcome " + username + "!";
    } else
     document.getElementById('welcomeMessage').innerHTML = "Hello!";
     }

I would appreciate it if maybe someone could help me out as i do cannot seem to find what is wrong and why it is not working. What i require is just a simple registration and login using local storage.
Thanks for any suggestions.

[pixelsoul]

For the same reason that I would not store credentials in a cookie, is the same reason I would not store credentials in local storage.

I would treat it the same way I would treat a cookie. Authenticate a user against hashed credentials in a database and then if they want to "stay logged in" so to say, then set a hashed value in local storage that you can check against to see if they have authenticated.

[powerson65]

Hi pixelsoul i know what you mean but unfortunately a database cannot be used, as this is part of an assignment where we can only use clinet side scripting, just Jquery, Ajax, javascript, HTML5, CSS3 etc, not even PHP. If it was with a database then it would not be a problem.

[rtrethewey]

Your progamming logic and syntax needs work. Learn to use a debugging tool like the Web Developer Extension for Firefox and Chrome or the F12 tools in Internet Explorer. They can show you where your syntax errors are or where there's a programming issue. In the meantime, I cobbled together some code that should help:

//function to store user name and password
   function store(theForm) {
    document.getElementById('welcomeMessage').innerHTML = "";
    var inputUsername= theForm["username"];
    var inputPassword= theForm["password"];
    localStorage.setItem("username", inputUsername.value);
    localStorage.setItem("password", inputPassword.value);
    document.getElementById('welcomeMessage').innerHTML = "Welcome " + localStorage.getItem('username') + "!";
    return false;
   } // end store()

//function to sign in
   function login(theForm) {
    document.getElementById('welcomeMessage').innerHTML = "";
    var inputUsername = theForm["username"];
    var inputPassword = theForm["password"];
    var username = inputUsername.value;
    var password = inputPassword.value;
    if ((username == localStorage.getItem('username')) && (password == localStorage.getItem('password'))) {
     document.getElementById('welcomeMessage').innerHTML = "Welcome " + localStorage.getItem('username') + "!";
      } else {
     document.getElementById('welcomeMessage').innerHTML = "Invalid Log-in!";
    }
    return false;
   } // end login()

and

<div class="popup">
<h2>Register</h2>
<p>Please enter your details here</p>
<form method="get" action="" onsubmit="return store(this);" id="register">
<label for="email">User Name</label>
<input type="text" id="username" placeholder="Select A User Name" required value="" /><br />
<label for="pass">Password</label>
<input type="password" id="password" placeholder="Select A Password" required value="" /><br />
<input type="submit" value="Register" />
</form>
</div>
<br />
<div class="popup">
<h2>Welcome Guest!</h2>
<p>Please enter your login and password here</p>
<form method="get" action="" onsubmit="return login(this);" id="signon">
<label for="email">User Name </label>
<input type="text" id="username" placeholder="Your Password" required value="" /><br />
<label for="password">Password</label>
<input type="password" id="password" placeholder="Your Password" required value="" /><br />
<input type="submit" value="Log In" />
</form>
<a class="close" href="#close"></a>
</div>

Note how the 'onsubmit' in the <form> tags passes information to the functions. I also added some HTML 5 attributes to the <input> tags to demonstrate how they can help you with data validation and user interfaces. Good luck!

[powerson65]

Hi you are right about the syntax and would like to thank you for you help as it seems to be working the only small problem is that if i register and then leave te page and go back to the page to login the saved registration is no longer present.
I know that localstorage is working on the browser Firefox, but cannot understand what is wrong, any ideas of how to go around it or what the problem might be.

[rtrethewey]

There is no official specification for the persistence of localStorage. It is largely dependent on the browser and user settings. You can't rely on it when crossing page boundaries.

[powerson65]

I know what you are saying, but from what i read that if one saves in local storage it will not be deleted like in session storage when the page is closed, and one should still find the data if he goes in again on the same page.
Well i thing that it all depends maybe on the browser settings.