如何显示使用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