如何显示用户使用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页面的数据？

回答

相关问题