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?

Answer 1

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.