如何显示使用javascript登录html页面的用户数据？

Question

I have a designed a register form, from which data is getting stored in the local storage and I want to display logged in user's data in success.html. 我设计了一个注册表，从中可以将数据存储到本地存储中，并且我想在success.html中显示已登录的用户数据。 I have tried using the following code but its not working. 我尝试使用以下代码，但无法正常工作。 Please help! 请帮忙！

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

This is a lot of code to debug for others. 这是很多要调试的代码。 I would recommend starting again with very small working example and then work your way up to the functionality you need. 我建议从一个非常小的工作示例重新开始，然后逐步实现所需的功能。 All of this while keeping the application functioning and taking notice of errors and use debugging tools (console.log, google development toolbar etc) when needed. 所有这些都使应用程序正常运行并注意到错误，并在需要时使用调试工具（console.log，google开发工具栏等）。

If something breaks you immediately know what broke it and it will be much easier to help you with problems or questions. 如果某件东西坏了，您会立即知道是什么东西弄坏了，这将很容易为您解决问题。

Answer 2

localStorage is not for transfer data between pages. localStorage不能在页面之间传输数据。 It only works on the page that it created. 它仅在创建的页面上有效。 Test below cod in two page a.html , b.html : 在两页a.html和b.html中的cod下面测试：

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

After first refresh you can see the alert with data you saved 第一次刷新后，您会看到包含已保存数据的警报

and in b.html: 并在b.html中：

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

It means data is not transfered to b.html. 这意味着数据不会传输到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