时间戳

首页 > 解决方案 > JavaScript 登录/注册不验证会话存储

javascript - JavaScript 登录/注册不验证会话存储

问题描述

我正在尝试使用从会话存储中检索到的数据来验证新注册的用户。它只需要在这个项目的会话存储中。基本上，新用户在注册页面上注册；电子邮件和密码保存在会话存储中；那么只要打开选项卡，他们就应该能够通过常规登录页面登录。即使在会话存储中设置了用户输入，之后我也无法在常规登录屏幕中验证用户。我不断收到错误“用户名/密码不匹配”。我错过了什么导致它无法验证？任何帮助深表感谢。

JavaScript

// TISSUE Login Script

//Function called when form is submitted
//Validates form and allows login

function validate() {
    'use strict';

    var UserName = document.getElementById('UserName').value;
    var email = "adrian@tissue.com";
    var email1 = "admin@tissue.com";
    var Password = document.getElementById('Password').value;
    var pass = "welcome1";
    var pass1 = "admin123";

// stored data from the register-form

    var storedName = sessionStorage.getItem('email');
    var storedPw = sessionStorage.getItem('password');

// entered data from the login-form

    var userName = document.getElementById('UserName');
    var userPw = document.getElementById('Password');


    if ((UserName == email) && (Password == pass)) {
        window.location.href = "Issues.html";
        return false;
    } else if ((UserName == email1) && (Password == pass1)) {
        window.location.href = "subscription_dashboard.html";
        return false;
    } else if ((userName == storedName) && (password == storedPw)) {
        window.location.href = "Issues.html";
        return false;
    } else {
        alert("username and/or password do not match");
        return false;
    }
}

// End of Validation

function init() {
    'use strict';

    if (document && document.getElementById) {
        var loginform = document.getElementById('loginform');  
        loginform.onsubmit = validate;
    }
}

window.onload = init;

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Tissue: Titan Issue Tracking</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Issue Tracking System"/>
      <meta name="author" content="Stephen Morris">
      <link rel="stylesheet" type="text/css" href="tissue.css">
      <script type="text/javascript" src="js/login.js"></script>
   </head>
   <body>
      <div id="wrapper">
         <h2>TISSUE: Titan Issue Tracker</h2>
         <div class="topnav">
            <a href="index.html">Home</a>
            <a href="Registration.html">SignUp</a>
         </div>
         <div id="loginwrap">
            <h1>Login</h1>
         </div>
         <div id="signupForm">
            <form action="Issues.html" method="post" id="loginform" onsubmit="return validate()">
               <div class="labels">
                  <label for="UserName">UserName:</label>
               </div>
               <div class="rightTab">
                  <input type="email" name="UserName" id="UserName" class="input-field" placeholder="E-mail Address" required>
               </div>
               <div class="labels">
                  <label for="Password">Password:</label>
               </div>
               <div class="rightTab">
                  <input type="password" name="Password" id="Password" class="input-field" placeholder="Password" required>
               </div>
               <div id="loginwrap">
                  <hr>
                  <input class="button" type="submit" value="Submit">
               </div>
            </form>
         </div>
       </div>
         <div class="copyright">
         Copyright &copy; 2018 Titan Issue Tracker
        </div>
  </body>
</html>

新用户 JavaScript

// UserStore Module

// Store Username and Password in sessionStorage

function newUser () {

    var userName = document.getElementById('email').value;
    var password = document.getElementById('password').value;

    sessionStorage.setItem("userName", userName);
    sessionStorage.setItem("password", password);

}

新用户注册 HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Tissue: Titan Issue Tracking</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Issue Tracking System"/>
      <meta name="author" content="Stephen Morris">
      <link rel="stylesheet" type="text/css" href="tissue.css">
      <script type="text/javascript" src="js/test.js"></script>
   </head>
   <body>
      <div id="wrapper">
         <h2>TISSUE: Titan Issue Tracker</h2>
         <div class="topnav">
            <a href="index.html">Home</a>
            <a href="Login.html">Login</a>
         </div>
         <div id="loginwrap">
            <h1>Create New Account</h1>
         </div>
         <div id="signupForm">
            <form action="Issues.html" method="post" id="loginform" onsubmit="return newUser()">
               <div class="labels">
                  <label for="email">* E-mail:</label>
               </div>
               <div class="rightTab">
                  <input type="email" name="email" id="email" class="input-field" placeholder="Enter Your E-mail" required>
               </div>
               <div class="labels">
                  <label for="Password">* Password:</label>
               </div>
               <div class="rightTab">
                  <input type="password" name="password" id="password" class="input-field" placeholder="Create Password" required>
               </div>
               <div class="labels">
                  <label for="password">* Confirm Password:</label>
               </div>
               <div class="rightTab">
                  <input type="password" name="password" id="password1" class="input-field" placeholder="Confirm Password" required>
               </div>
               <div id="loginwrap">
                  <hr>
                  <input class="button" type="submit" value="Submit">
               </div>
            </form>
         </div>
       </div>
         <div class="copyright">
         Copyright &copy; 2018 Titan Issue Tracker
        </div>
  </body>
</html>

标签： javascripthtml

解决方案

我认为问题在于您正在使用名称设置存储并尝试使用另一个键名获取项目，例如：

sessionStorage.setItem("userName", userName);
var storedName = sessionStorage.getItem('email');

它应该是：

sessionStorage.setItem("userName", userName);
var storedName = sessionStorage.getItem("userName");

或者

sessionStorage.setItem("email", userName);
var storedName = sessionStorage.getItem("email");

希望能帮助到你。

推荐阅读