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

Question

我設計了一個注冊表，從中可以將數據存儲到本地存儲中，並且我想在success.html中顯示已登錄的用戶數據。 我嘗試使用以下代碼，但無法正常工作。 請幫忙！

Login.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>

Answer 1

這是很多要調試的代碼。 我建議從一個非常小的工作示例重新開始，然后逐步實現所需的功能。 所有這些都使應用程序正常運行並注意到錯誤，並在需要時使用調試工具（console.log，google開發工具欄等）。

如果某件東西壞了，您會立即知道是什么東西弄壞了，這將很容易為您解決問題。

Answer 2

localStorage不能在頁面之間傳輸數據。 它僅在創建的頁面上有效。 在兩頁a.html和b.html中的cod下面測試：

//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。

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

問題描述

2 個解決方案

解決方案1
0 2017-02-13 12:24:24

解決方案2
0 2017-02-13 12:29:41

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

問題描述

2 個解決方案

解決方案1 0 2017-02-13 12:24:24

解決方案2 0 2017-02-13 12:29:41

解決方案1
0 2017-02-13 12:24:24

解決方案2
0 2017-02-13 12:29:41