我如何使用HTML，JavaScript Web存儲作為登錄腳本

Question

我想將Web存儲用於大約24頁的登錄系統。 我正在嘗試使用HTML-5 Web存儲api進行會話值存儲。 這是我嘗試過的。

      <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";
    }
}

在這里，我想根據所使用的密碼將角色的值設置為vp或sales。 我想使用角色值來檢查用戶是vp還是銷售人員，我該怎么做？

Answer 1

據我了解，您正在嘗試從另一個頁面檢索保存的值。

為此，只需像設置它們一樣讀取值：

role = localStorage.role

會把你的變量還給你。

我會這樣重寫您的代碼：

<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();
}

盡管它是題外話，但我對可能是“ vp”的密碼的安全性提出了嚴重懷疑。 我的意思是，您只是無法使用接受“ vp”作為密碼的應用程序正式投入生產。

編輯：

如Feeela所述，直接在瀏覽器中以明碼存儲密碼並不安全。 但是，盡管該變量稱為“ password”，但絕不用作密碼。 它不用於認證目的。 這只是公司中的“角色”，應該只是“選擇您的角色”下拉菜單。 有一個密碼字段是完全矛盾的。