函数不从本地主机提取输入数据答案

【问题标题】：function not pulling input data from local host函数不从本地主机提取输入数据
【发布时间】：2021-02-09 07:35:33
【问题描述】：

我正在创建一个简单的登录注册表单，用于创建用户并将其存储在本地主机中。我已经让注册表单正常工作，但是当我尝试从本地主机中提取信息时，它只是刷新了页面。我只是想知道如何才能使该功能正常工作。

这是我的 JS：

const signup = (e) => {
    let user = {
      firstName: document.getElementById("firstName").value,
      lastname: document.getElementById("lastName").value,
      email: document.getElementById("email").value,
      username: document.getElementById("username").value,
      password: document.getElementById("password").value,
      confirm_password: document.getElementById("confirm_password").value,
    };
      localStorage.setItem("user", JSON.stringify(user));
      console.log(localStorage.getItem("user"));
      e.preventDefault();
      alert("Signup Successful")

  };

  function login() {
    var stored_username = localStorage.getItem('username');
    var stored_password = localStorage.getItem('password');
    var username1 = document.getElementById('username1');
    var password2 = document.getElementById('password2');

    if(username1.value == stored_username && password2.value == stored_password) {
      alert('Login Successful.');
  }else {
      alert('Username or password is incorrect.');
  }
}
document.getElementById("login-btn").addEventListener(type = click, login())

这是我的 HTML：

 <div class="bodyBx">
        <section>
            <div class="container">
                <div class="user signinBx">
                    <div class="imgBx"><img src="https://images.unsplash.com/photo-1551034549-befb91b260e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="width: 400px;" alt="" /></div>
                    <div class="formBx">
                        <form>
                            <h2>Sign In</h2>
                            <input type="text" id="username2" placeholder="Username" />
                            <input type="password" id="password2" placeholder="Password" />
                            <button id = "login-btn" type="submit" onclick="login();">Submit</button>
                            <p class="signup">
                                Need an account ?
                                <a href="#section2" onclick="toggleForm();">Sign Up.</a>
                            </p>
                        </form>
                    </div>

                </div>
            </div>
        </section>

        <!-- ================= Sign Up Form Start ================= -->

        <section>
            <div class="container">
                <div class="user signupBx" id="section2">
                    <div class="imgBx"><img src="https://images.unsplash.com/photo-1555680206-9bc5064689db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="width: 400px;" alt="" /></div>
                    <div class="formBx">
                        <form role="form" onsubmit="signup(event)">
                            <h2>Sign Up</h2>
                            <input type="text" id="firstName" placeholder="First Name" />
                            <input type="text" id="lastName" placeholder="Last Name" />
                            <input type="email" id="email" placeholder="example@email.com..." />
                            <input type="text" id="username" placeholder="Username" />
                            <input type="password" id="password" placeholder="Password" />
                            <input type="password" id="confirm_password" placeholder="Confirm Password" />
                            <button type="submit">Submit</button>

                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>

【问题讨论】：

标签： javascript html css function localhost

【解决方案1】：

将登录按钮的类型从submit更改为button，如下所示

<button id = "login-btn" type="button" onclick="login();">Submit</button>

如果type=submit 表单被发布到表单的action 属性中指定的url，否则如果action 缺失并且您将看到页面刷新，则发布到同一页面。

替代方法 - 您也可以在 login() 中尝试 return false;

您的 addEventListener 应该如下所示，您不必提供 type = click，第一个参数是 string 类型，第二个参数是 function 类型。检查docs

document.getElementById("login-btn").addEventListener("click", login)

【讨论】：

【解决方案2】：

Localstorage 只能存储文本。所以你存储了一个字符串化的对象，这很好，但是你试图从中检索不存在的属性。

代替：

var itm={someField:1};
localStorage.setItem("itm",JSON.stringify(itm));

//then later
localStorage.getItem("someField");
//localstorage doesnt know what someField is

你想要：

var itm={someField:1};
localStorage.setItem("itm",JSON.stringify(itm));

//then later
itm = JSON.parse(localStorage.getItem("itm"));
someField = itm.someField

至于刷新，请查看： Stop form refreshing page on submit

TL;DR：在function login() 中添加e.preventDefault()（您必须将其更改为function login(e)。

【讨论】：