如何顯示用戶使用javascript登錄html頁面的數據？

我有一個設計的註冊表單，數據存儲在本地存儲中，我想在success.html中顯示登錄用戶的數據。我試過使用下面的代碼，但它不工作。請幫忙！如何顯示用戶使用javascript登錄html頁面的數據？

<!DOCTYPE html> 
<html> 
<title>Login</title> 
<body> 
<div class="col-md-6 col-md-offset-3"> 
    <h2>Login</h2> 
    <form name="form" action="success.html" method="post"> 
     <div class="form-group"> 
      <label for="username">Username<span style="color: red;">*</span></label> 
      <input type="text" name="username" id="username" class="form-control" /> 
      <span class="help-block" style="display:none">Username is required</span> 
     </div> 
     <div class="form-group" > 
      <label for="password">Password<span style="color: red;">*</span></label> 
      <input type="password" name="password" id="password" class="form-control" /> 
      <span style="display:none">Password is required</span> 
     </div> 
     <div class="form-actions"> 
      <button type="submit" onclick="validate()">Login</button> 

      <a href="register.html" class="btn btn-link">Register</a> 
     </div> 
    </form> 

    <div id="display"></div> 
    <script src="controller.js"> 
</script> 
</div> 
</body> 
</html>

Controller.js--

localStorage.setItem("key_users", JSON.stringify(users)); 

var rusers = JSON.parse(localStorage.getItem('key_users')); 

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

    for(var p in rusers){ 
     console.log(p+':'+rusers[p].username+'|'+rusers[p].email); 
     if(username==rusers[p].username && password==rusers[p].password){ 
     alert("Logged in successfully"); 
     function Redirect() { 
       window.location="success.html"; 
       messageBox.innerHTML = "Welcome, " +rusers[p].firstname+ " here are your details: " + "</br>"; 
    messageBox.innerHTML += "Name: " + rusers[p].firstname + "<br/>"; 
    messageBox.innerHTML += "UserName: " + rusers[p].username + "<br/>"; 
    messageBox.innerHTML += "EmailId: " + rusers[p].email + "<br/>"; 
      } 
     } 

    }

success.html--

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
<h2>Welcome User</h2> 
<div id="display"></div> 
<script src="controller.js"> 
</script> 
</body> 
</html>

來源

2017-02-13 Poppins

什麼是不正確的工作？你有任何錯誤？ –

用戶詳細信息未顯示在success.html中 – Poppins

這是一個很大的代碼調試別人。我會建議以非常小的工作示例重新開始，然後按照您所需的功能工作。所有這些，同時保持應用程序正常運行並注意錯誤並在需要時使用調試工具（console.log，google開發工具欄等）。

如果事情發生中斷，您立即知道是什麼打破了它，並且在問題或疑問方面提供幫助會容易得多。

來源

2017-02-13 12:24:24

localStorage不適用於在頁面之間傳輸數據。它只適用於它創建的頁面。測試下面的鱈魚有兩種a.html頁，b.html：

//a.html: 
    if (!sessionStorage.getItem("data")) 
     sessionStorage.setItem("data", "data you saved"); 
    else 
     alert(sessionStorage.getItem("data"));

第一後刷新就可以看到警報，保存

和b.html 數據：

alert(sessionStorage.getItem("data")); //alert null

這意味着數據不會轉移到b.html。

來源

2017-02-13 12:29:41

如何顯示用戶使用javascript登錄html頁面的數據？

回答

相關問題