无法使用 JavaScript 模块将用户输入存储在会话存储中答案

【问题标题】：Unable to store user input in session storage using JavaScript Module无法使用 JavaScript 模块将用户输入存储在会话存储中
【发布时间】：2019-04-28 16:14:04
【问题描述】：

我正在尝试使用 JavaScript 模块从注册表单中检索用户输入（即电子邮件地址和密码）并将其设置为会话存储。我尝试了几种不同的方法，但仍然无法存储在会话存储中，并且在 Chrome 的开发工具中没有收到任何错误。此外，需要验证注册脚本中的电子邮件是否正确。这是项目的详细信息，可以提供一个想法。

我们需要允许我们的用户注册以访问我们的应用程序。为此，我们需要存储我们的用户信息，以便可以检索它。创建一个 UserStore 模块，该模块应将用户的用户名和密码存储在会话存储中。
UserStore 模块应该有以下可用的方法：

一个。获取：检索给定电子邮件地址的用户对象。湾。保存：在会话存储中存储用户对象
我们还需要一个注册表单供我们的用户注册。所以创建一个页面 registration.html 并从您的主页链接到它。此页面的提交应验证用户输入了有效的电子邮件地址，如果是，则应将用户信息保存到 UserStore。
最后修改您的 login.js 脚本，现在从 UserStore 检索用户对象以用于登录用户。

非常感谢任何建议或帮助。

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"/>
      <link rel="stylesheet" type="text/css" href="tissue.css">
      <script type="text/javascript" src="js/userStore.js"></script>
      <script type="text/javascript" src="js/registration.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 handleReg()">
               <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>

用户存储模块

//UserStore: Allow users to register

(function (window) {
    "use strict"

    var App = window.App || {};

    function UserStore() {
        console.log("running the UserStore function");
    }

//Add: Saves email & password in session storage

    UserStore.prototype.save = function (userName, password) {
        sessionStorage.setItem("userName", userName);
        sessionStorage.setItem("password", password);
    };

//Get: Retrieves username & password

    UserStore.prototype.get = function (password) {
        var userEml = sessionStorage.getItem("userName", userName);
        var userPwd = sessionStorage.getItem("password", password);
        return userEml;
        return userPwd;
    };


    App.UserStore = UserStore;
    window.App = App;
})(window);

注册功能

//User Registration


function handleReg () {
    'use strict';

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

//Email Validation

    var App = window.App || {};
    var Validation = false;
    var Validation = {
        isValidEmail: function (email) {
            return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
        }
    };
    App.Validation = Validation;
    window.App = App;
}(window);

【问题讨论】：

标签： javascript html node-modules

【解决方案1】：

我最终修改了代码，现在它可以工作了。

用户存储

//UserStore: Allow users to register

(function (window) {
    "use strict"

    var App = window.App || {};

    function UserStore() {
        console.log("running the UserStore function");
        sessionStorage.setItem("admin@tissue.com", "admin123");
    }

//Add: Saves email & password in session storage

    UserStore.prototype.save = function (userName, password) {
        sessionStorage.setItem(userName, password);
    };

//Get: Retrieves username & password

    UserStore.prototype.get = function (userName) {
        var userPwd = sessionStorage.getItem(userName);
        return userPwd;
    };


    App.UserStore = UserStore;
    window.App = App;
})(window);

注册功能

//User Registration


function handleReg () {
    'use strict';

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

    var userStore = new App.UserStore();
    userStore.save(userName, password);

//Email Validation

    var Validation = false;
    var Validation = {
        isValidEmail: function (email) {
            return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
        }
    }
}
window.onload = function() {
    document.getElementById("regForm").onsubmit = handleReg;
}

【讨论】：