How can i use the html, javascript web storage for login script

Question

I want to use the web storage for my login system which has about 24 pages. i am trying to use the HTML-5 web storage api for session value storage. Here is what i have tried.

      <div class="main">        
        <form id="form_id" method="post" name="myform">
          <table>
              <tr><td class="credentials-top">LoginID </td><td><input type="text" name="username" id="username" autofocus/></td></tr>
              <tr><td class="credentials-top">Password </td><td><input type="password" name="password" id="password"/></td></tr>
          </table>
          <input type="button" value="Login" class="btn btn-warning" onclick="validate(),senduser()"/>
        </form>
      </div>

javascript:

function validate(){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var role;
    if (password == "vp"){
        localStorage.setItem("role", "vp");
        return false;
    }
    else if (password == "sales"){
        localStorage.setItem("role", "sales");
        return false;
    }
    else if (password == ""){
        return false;
    }
    else{
        window.location = "login-failed.html";
    }
}

Here i want to set the value of role to vp or sales depending on password accecpted. and i want to use role value to check if the user is vp or sales, how can i do this?

You mean read the value? like role = localStorage.role ? Will give you "vp" or "sales". As an aside, I'm not sure "vp" is a very secure password :) — Jeremy Thille
– Jeremy Thille, Commented Jun 5, 2015 at 11:25
You have a mistake in your first code sample: It's onclick="validate(); senduser();" (semicolon, not comma) — tim-we
– tim-we, Commented Jun 5, 2015 at 11:26

Jeremy Thille · Accepted Answer · 2015-06-05 12:46:35Z

3

As I understand, you're trying to retrieve the saved values from another page.

To do so, just read the values like you set them :

role = localStorage.role

will give your variable back.

I would rewrite your code this way :

<input type="button" value="Login" class="btn btn-warning" onclick="validate()"/>

function validate(){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;

    if(!password.length) return false;

    var role,
        allowedPasswords = ["vp","sales"]; // clean way to handle a large number of passwords without repeating your code

    if(allowedPasswords.indexOf(password) > -1){
        localStorage.role = password;
    }else{
        window.location = "login-failed.html";
    }

    senduser();
}

Although it is off-topic, I raise serious doubts about the security of a password that bould be "vp". I mean, you just can't seriously go into production with an application that accepts "vp" as a password.

Edit :

As Feeela mentioned, it is not more secure to store a password in clear, directly in the browser. However, althought the variable is called "password", It's not used as a password whatsoever. It's not used for authentication purposes. It's just a "role" in the company and should just be a "choose your role" dropdown. Having a password field for this is totally incongruous.

edited Jun 5, 2015 at 12:46

answered Jun 5, 2015 at 12:35

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

feeela Over a year ago

Why does everyone complain about a short password, but not a word about a client-side application, that stores passwords in clear text? The whole script above has nothing to do with security – I hope it is just for learning purposes…

Jeremy Thille Over a year ago

Yeah, that's also true. But although the variable is called "password", it's not an actual password. It's just a role. The second input should not be a password field, but just a select... like "Select your role in the list".

Collectives™ on Stack Overflow

How can i use the html, javascript web storage for login script

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related